JQuery快速入门 1.JQuery简介 JQuery是一个JS库，别人使用JS写了很多功能给我们用，主要集中在以下几点： 1.简化找标签，改样式等操作语法 2.增加了动画的操作方法 3.解决了相关属性的兼容性写法 2.JQuery语法 1.找标签 $(\'#box\') id选择器 $(\'.box\') 类选择器 $(\'div\') 标签选择器 $(\'.box li) 后代选择器 $(\'.box > a\') 子代选择器 $(\'.box, .one\') 并集选择器 选择器筛选 $(\'.box li:first\') 第一个li $(\'.box li:last\') 最后一个li $(\'.box li:eq(2)\') 第3个li(索引从0开始) $(\'.box li:gt(3)\') 索引大于3的li $(\'.box li:lt(3)\') 索引小于3的li $(\'.box li:even\') 偶数li (因为索引从0开始，所以显示相反) $(\'.box li:odd\') 奇数li //表单筛选 $(\'.box input:text\') input中是text的标签 $(\'.box input:radio\') input中是radio的标签 $(\'.box input:checkbox\') input中被选中的标签 //方法找标签 $(\'.box li\').eq(0) 第一个li $(\'.box li\').first() 第一个li $(\'.box li\').last() 最后一个li $(\'.box\').parent() 父元素 $(\'.box\').children(条件) 所有子元素 $(\'.box\').siblings(条件) 所有兄弟元素 $(\'.box\').find(条件) 在box中查找某个元素 $(\'.box\').next() 下一个元素 $(\'.box\').nextAll() 下面所有的元素 $(\'.box\').prev() 上一个元素 $(\'.box\').prevAll() 上面所有元素 2.加事件 标签.click(function(){}); 标签.mouseover() 标签.mouseout() 标签.hover() 其他类似 标签.on(事件类型，回调函数); $(\'.box\').on(\'click\',function(){}); 3.改样式和内容属性 //内容操作 标签.html() 修改内容 标签.val() 修改表单的value值 标签.text() 修改文字内容 //样式操作 标签.css(\'属性名\',\'属性值\'); 标签.css({属性名:属性值,属性名:属性值}); //类的操作 标签.addClass(\'current\') 标签.removeClass(\'current\') 标签.toggleClass(\'current\') 标签.hasClass(\'current\') //自定义属性操作 标签.attr(\'属性名\'，\'属性值\'); 标签.removeAttr(\'属性名\'); 标签.prop(\'属性名\'，\'属性值\'); 注意： prop方法用于获取类似于checked这种标签独有的属性，Jquery未封装 4.加动画 //显示隐藏 show() hide() toggle() //上拉下拉 slideDown() slideUp() slideToggle() //淡入淡出 fadeIn() fadeOut() fadeTo() fadeToggle() //自定义动画 animate({},时间) //注意参数写法很多，都带引号总没错 stop() 停止动画 delay() 延迟动画 5.节点操作 empty() 清空 remove() 移除 clone() 克隆 replace() 替换 after() 标签之后插入 before() 标签之前插入 append() 标签内最后追加内容 appendTo() 将某个标签添加到父标签中 7.位置大小获取 //获取left值和top值 标签.offset().left 标签.offset().top //获取滚动距离 标签.scrollTop() 标签.scrollLeft() //获取宽高 标签.width() 标签.height() 6.其他 //阻止冒泡 e.stopPropagation() //获取坐标 e.pageX e.pageY //获取标签索引 标签.index(); //遍历 each() //入口函数 $(function(){}); //当前元素 $(this)
1.将DOM对象使用$() 包裹即可转换为JQuery对象，然后使用Jquery的方法
//btnObj就是DOM对象
var btnObj= document.getElementById(\"btn\");
btnObj. =function () {
this.style.backgroundColor=\"red\";
};
//DOM对象转jQuery对象,只需要把DOM对象放在$(dom对象)--->jQuery对象
$(btnObj).click(function () {
$(this).css(\"backgroundColor\",\"red\");
});
$(this) 表示当前标签
$(btnObj) 表示将dom的btn转换为jq对象，这样就可以用到jq的方法
2.JQ对象转换为DOM对象的方法
$(btnObj).get(0);---->DOM对象
$(btnObj)[0];----->DOM对象
------------------------------------------
var btnObj=document.getElementById(\"btn\");//DOM对象
var obj= $(btnObj).get(0);//DOM对象
obj. =function () {
this.style.backgroundColor=\"green\";
};
var btnObj=document.getElementById(\"btn\");//DOM对象
var obj= $(btnObj)[0];//DOM对象
obj. =function () {
this.style.backgroundColor=\"green\";
};
.html() 类似于innerHTML
.text() 类似于innerText
.val() 类似于input的value属性
注意： 括号中写一个参数表示设置值，什么都不写表示获取值。
.css() 类似于给标签添加样式
addClass(\'current\') //添加类
removeClass(\'current\') //移除类
toggleClass(\'current) //开关类
hasClass(\'current\') //是否有某个类，返回true和false
//可以添加多个类
addClass(\'current\').addClass(\'bd\');
addClass(\'current bd\');
//注意添加类名前面没有点。
show() 显示
hide() 隐藏 本质上还是display:block和none
slideUp() 上滑
slideDown() 下滑
slideToggle() 上下滑
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 淡入淡出
fadeTo(事件，透明度) 透明度动画
参数1：
1.可以写毫秒，1000毫秒
2.可以写字符串 slow normal fast
$(\"#dv\").hide(1000);
$(\"#dv\").show(\"fast\");
参数2： 是一个回调函数，可以在动画执行后触发
$(\'#dv\').hide(1000,function(){
alert(\'动画结束了\')；
})
animate(属性，时间，回调函数);
属性的变化和时间是必须的，回调函数可以没有。
animate({\"属性名\"：\"属性值\"},1000)
注意： animate属性不能修改非数值效果，例如颜色。
stop() 动画停止函数（内部原理停止上一个定时器）；
建议: 在每次添加动画之前都加上stop(),直接显示隐藏动画除外
直接使用$(\'标签\') 就可以创建一个标签对象。
append() 追加元素
prepend() 插入某个元素前面
after() 在后面添加元素
before() 在前面添加元素
appendTo() 把当前标签添加到其他标签中去
//创建元素
var aObj=$(\"<a href=\'http://www.baidu.com\'>百度\"+i+\"</a>\");
//把元素添加到div中
$(\"#dv\").append(aObj);//把超链接追加到div中
//把元素插入到某个元素的前面
$(\"#dv\").prepend(aObj);
//把元素添加到当前元素的后面(兄弟元素来添加)
$(\"#dv\").after(aObj);
//把元素添加到当前元素的前面(兄弟元素来添加)
$(\"#dv\").before(aObj);
注意：append追加元素，可以把已经存在的元素移除，类似于剪切效果
html(\'\') //清空内容
empty() //清空内容
remove() 移除元素
clone() 克隆元素
children() 子元素
attr() 设置和获取自定义属性
设置自定义属性
attr(\'ss\',\'1\');
获取自定义属性
attr(\'ss\')
注意： attr不能获得多选框的选中值checked属性
prop() //该方法可以获取多选框的checked属性
//复选框选中案例
//获取选中状态
var flag=$(\"#ck\").prop(\"checked\");
if(flag){
//选中了
$(\"#ck\").prop(\"checked\",false);
}else{
//没有选中
$(\"#ck\").prop(\"checked\",true);
}
width() //获取和设置宽度
height() //获取和设置高度
$(\"#dv\").css(\"width\") //获取宽度，返回字符串 100px，可以使用parsetInt转换为数字
$(\'#dv\').width(100); //直接设置元素宽度为100，不需要带px
总结： 通过css设置和获取宽高，需要带px单位，使用width()方法可以不用带px单位。
offset() 方法可以获得 left和top值，都是数字，不带单位
offset().left //left值
offset().top
//获取left和top的值--->都是数字类型
console.log($(\"#dv\").offset().left);
console.log($(\"#dv\").offset().top);
//设置left和top值
$(\"#dv\").offset({\"left\":200,\"top\":200});
13.页面滚动距离
scrollLeft() 滚动出去的左边距离
scrollTop() 滚动出去的顶部距离
$(document).click(function () {
//获取的滚动出去的距离----->数字类型
console.log($(this).scrollLeft()+\"====\"+$(this).scrollTop());
});
bind() 事件绑定 类似于JS中的addEventListener
普通添加事件：
$(\'#btn\').click();
添加多个监听事件
$(\'#btn\').bind({\"click\"：回调函数},{\"mouseover\"：回调函数});
//可以同时添加多个事件，但是事件执行函数是一样的
$(\'#btn\').bind(\"mouseover mouseout\",function(){});
delegate(标签,事件类型，回调函数) //给某个元素的子元素添加事件
on() 父元素调用为子元素添加事件
on(事件类型，标签，回调函数);
两种用法：
1.两个参数： 事件名称 回调函数
2.三个参数: 事件名称 添加事件元素，回调函数
总结：
bind:
绑定多个事件
参数:{\"事件的类型\":事件处理函数,....}
delegate
参数:父级元素.delegate(\"子级元素\",\"事件类型\",事件处理函数)
on
参数:父级元素.on(\"事件类型\",\"子级元素\",事件处理函数);
建议：在手机上或者动态添加的事件推荐使用on来添加
on() off()
bind() unbind()
delegate() undelegate()
//建议： 事件绑定和解绑，不要混着使用，普通的click方法可以使用off解绑
注意： 如果是通过父级元素添加事件，那么父级元素解绑事件，子级元素事件也会消失。
//第一个按钮通过on的方式绑定点击事件
$(\"#btn1\").on(\"click\",function () {
alert(\"我被点了\");
});
//第二个按钮把第一个按钮的点击事件解绑
$(\"#btn2\").on(\"click\",function () {
//off()参数:要解绑的事件的名字
$(\"#btn1\").off(\"click\");//解绑事件
});
//第一个按钮bind绑定事件
$(\"#btn1\").bind(\"click\",function () {
alert(\"我又被点了\");
});
//第二个按钮unbind解绑事件
$(\"#btn2\").bind(\"click\",function () {
$(\"#btn1\").unbind(\"click\");//解绑事件的方法
});
//点击第一个按钮为div中p绑定点击事件
$(\"#btn1\").click(function () {
$(\"#dv\").delegate(\"p\",\"click\",function () {
alert(\"我被点了\");
});
});
//点击第二个按钮为div中p解除绑定事件
$(\"#btn2\").click(function () {
$(\"#dv\").undelegate(\"p\",\"click\");//解绑
});
e.delegateTarget----->div--->谁在替元素绑定的事件--div
e.currentTarget----->input--->真正是谁绑定的事件
e.target---->input----触发的事件
链式编程原理： 内部返回了return this当前对象；
注意： 有些方法传入了参数，才能返回对象，如果是直接获取属性的值，返回的是内容，就不是对象了。
function Student(name) {
this.name=name;
this.sayHi=function (name) {
if(name){
console.log(\"俺是\"+name);
return this;
}else{
console.log(\"我的名字叫\"+this.name);
}
//console.log(\"我的名字叫\"+this.name);
// return this;//把当前对象返回
};
this.eat=function () {
console.log(\"我就是喜欢吃大蒜+榴莲+臭豆腐\");
};
}
var stu=new Student(\"小明\");
stu.sayHi().eat();
1.评分案例
$(\".comment>li\").mouseover(function () {
$(this).text(\"★\").prevAll(\"li\").text(\"★\").end().nextAll(\"li\").text(\"☆\");
}).mouseout(function () {
$(\".comment\").find(\"li\").text(\"☆\");
$(\".comment>li[index=1]\").text(\"★\").prevAll(\"li\").text(\"★\")
}).click(function () {
$(this).attr(\"index\",\"1\").siblings(\"li\").removeAttr(\"index\");
});
继续阅读与本文标签相同的文章
下一篇 :
必知·望细读
-
X-Pack Spark 监控指标详解
2026-05-19栏目： 教程
-
招募令：阿里云MVP全球招募中，我们的征途是星辰大海！
2026-05-19栏目： 教程
-
dnspod配置CNAME流程
2026-05-19栏目： 教程
-
使用Gitbook打造个人知识归档系统
2026-05-19栏目： 教程
-
如何在新网配置CNAME的操作步骤
2026-05-19栏目： 教程