jQuery引入
-
下载链接:
[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。 -
引入:
<script src = 'jquery.js'> </script>
jQuery对象和dom对象
-
jQuery找到的对象称为 --> jQuery对象
-
原生js找到的标签称为 --> dom对象
-
dom对象只能使用dom对象的方法,不能使用jquery对象的方法,jquery对象也是,它不能使用dom对象的方法
-
dom对象和jquery对象互相转换:
-
jquery对象转dom对象 -- jquery对象[0] 示例: $('#d1')[0]
-
dom对象转jquery对象 -- $(dom对象)
-
jQuery选择器
基本选择器(同css一样)
-
不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象
-
通过 .text() 可以拿到标签里面的文本内容
-
id选择器
-
$("#id值")
-
-
标签选择器
-
$("标签名")
-
-
class选择器
-
$(".类名")
-
-
配合使用
-
$("div.c1") 找到有c1 class类的div 标签
-
-
所有元素选择器
-
$("*")
-
-
组合选择器
-
$("#id, .className, tagName")
-
-
层级选择器
-
x和y可以为任意选择器
-
$("x y"); x的所有后代y（子子孙孙）
-
$("x > y"); x的所有儿子y（儿子）
-
$("x + y"); 找到所有紧挨在x后面的y(一个)
-
$("x ~ y"); x之后所有的兄弟y
-
-
选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象
基本筛选器(选择之后进行过滤)
<ul>
<li id="1">南山</li>
<li id="2">
<a href="">百度</a>
宝安
</li>
<li id="3">坪山</li>
<li id="4">罗湖</li>
<li id="5">
<a href="">华为</a>
福田
</li>
<li id="6">龙岗</li>
</ul>
:first -- 示例:$('li:first') // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(选择器) // 排除所有满足not条件的标签
:has(选择器) // --$('li:has(.c1)') 找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签
属性选择器
-
[attribute = value] 属性等于
-
[attribute != value] 属性不等于
// 示例,多用于input标签 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到checkbox类型的input标签 $("input[type!='text']"); // 取到类型不是text的input标签
表单筛选器
-
多用于找form表单里面出现的input标签,当然通过属性选择器找肯定没有问题的,这样就是写着简单一点
找到的是type属性为这个值的input标签中 :text :password :file :radio :checkbox :submit :reset :button // 例子: $(":checkbox") // 找到所有的checkbox
表单对象属性筛选器
-
:enabled 可用的标签
-
:disabled 不可用的标签
-
:checked 选中的input标签
-
:selected 选中的option标签
// 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 // 找到被选中的option： <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
筛选器方法
-
选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，写在对象后面加括号，不再是写在选择器里面的了。
-
下一个元素
$('#l3').next(); 找到下一个兄弟标签 $('#l3').nextAll(); 找到下面所有的兄弟标签 $('#l3').nextUntil('#l5'); 直到找到id为l5的标签就结束查找，不包含它 -
上一个元素
$("#id").prev() 找到上一个兄弟标签 $("#id").prevAll() 找到上面所有的兄弟标签 $("#id").prevUntil("#i2") 直到找到id为i2的标签就结束查找，不包含它 -
父亲元素
$("#id").parent() // 查找一级父类 $("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到） $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。 -
儿子和兄弟元素
$('ul').children(); // 找所有的儿子们标签 $('ul').children('#l3'); // 找到符合后面这个选择器的儿子标签 $('#l5').siblings(); // 找到所有的兄弟们标签,不包含自己 $('#l5').siblings('#l3'); // 找到符合后面这个选择器的兄弟标签 -
查找
-
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
-
$("div").find("p")找到div后代中的p标签,相当于 `$('div p')
-
-
筛选
-
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是从div标签的子子孙孙中找到一个符合条件的标签 等价于 $("div.c1")--> 找到类值等于c1的div标签 .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素$('li').not('#l3'); .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
-
标签操作
样式操作
-
样式类操作
-
addClass(); 添加指定的css类名
-
removeClass(); 移除指定的css类名
-
hasClass(); 判断样式是否存在
-
toggleClass(); 切换css类名,有就移除没有就添加
示例代码 $('.c1').addClass('c2'); $('.c1').removeClass('c2'); $('.c1').hasClass('c2'); $('.c1').toggleClass('c2');
-
-
css样式
-
原生js: 标签.style.color = 'red';
-
jquery: $('.c1').css('background-color','red')
同时设置多个css样式:
$('.c1').css({'background-color':'red','width':'200px'})
-
-
位置操作
-
position() 查看相对位置,不能设置位置
-
offset() 查看距离窗口左上角的绝对位置
查看位置:
$('.c2').position(); //查看相对位置
$('.c2').offset(); //查看距离窗口左上角的绝对位置
设置位置:
$('.c2').offset({'top':'20','left':'40'});
-
-
jQuery绑定点击事件的写法
//原生js绑定点击事件: $('.c1')[0].onclick = function(){ this.style.background = 'red'; } // jquery绑定点击事件 $('.c1').click(function () { $(this).css('background-color','green'); })
-
$(window).scrollTop() // 滚轮向下移动的距离
$(window).scrollLeft() // 滚轮向右移动的距离
View Code// 滚动事件.监听滚动事件来显示或者隐藏标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: green; height: 4000px; 100px; } .s1{ position: fixed; left:20px; bottom:20px; height: 30px; 70px; background-color: black; text-align: center; line-height: 30px; } .s1 a{ color: white; font-size: 14px; text-decoration: none; } .hide{ display: none; // 隐藏标签 } </style> </head> <body> <span>顶部位置</span> <div class="c1"></div> <span class="s1 hide"> <a href="#top">回到顶部</a> // <span>返回顶部</span> </span> <script src="jqu.js"></script> <script> $(window).scroll(function () { console.log($(window).scrollTop()); if ($(window).scrollTop()>200){ $('.s1').removeClass('hide') // 当滑动的距离超过200的时候,就显示标签 }else{ $('.s1').addClass('hide') } }) // 回到顶部,scrollTop设置值 // $('.s1').click(function(){ // $(window).scrollTop(0) // }) </script> </body> </html>
-
尺寸
$('.c1').height(); //content 高度 $('.c1').width(); //content 宽度 $('.c1').innerHeight(); //content高度+padding高度 $('.c1').innerWidth(); //content宽度+padding宽度 $('.c1').outerHeight(); //content高度+padding高度 + border高度 $('.c1').outerWidth(); //content宽度+padding宽度+ border宽度
文本操作
-
html() 取得第一个匹配元素的html内容，包含标签内容
-
html(val) 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
-
text() 取得所有匹配元素的内容，只有文本内容，没有标签
-
text(val) 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
$('.c1').html('<h1>你好</h1>'); // 将你好插入文本中 $('.c1').text('<h1>你好</h1>'); // 无法识别标签,所以将标签作为文本插入进去
值操作
获取值
input type='text'的标签--$('#username').val();
input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,只会拿到一个值,需要循环取值
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select --- $('#city').val(); 拿到value设置的值
多选select --- $('#author').val(); // ["2", "3"]
设置值
input type='text'的标签 --- $('#username').val('李杰');
input type='radio'标签 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
单选select --- $('#city').val('1'); option value='1'
多选select --- $('#author').val(['2','3'])
属性操作
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr(attrName)// 从每一个匹配的元素中删除一个属性
示例: 设置单个属性 $('.c1').attr('xx','oo'); 设置多个属性 $('.c1').attr({'age':'18','sex':'alex'}); 查看属性 $('.c1').attr('属性名'); $('.c1').attr('xx'); 删除属性 $('.c1').removeAttr('xx'); prop -- 针对的是checkedselecteddisabled.. 查看标签是否有checked属性,也就是是否被选中 attr $(':checked').attr('checked'); //checked --没被选中: undefined prop $(':checked').prop('checked'); //true -- 没被选中 : false 通过设置属性的方式来设置是否选中: $(':radio').eq(2).prop('checked',true); true和false不能加引号 $(':radio').eq(2).prop('checked',false); 简单总结: 1.对于标签上有的能看到的属性和自定义属性都用attr 2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文档处理
添加到指定元素内部的后面 $(A).append(B) // 把B追加到A $(B).appendTo(A) // 把B追加到A // 添加字符串照样能识别标签 ***** $('#d1').append('<a href="http://www.jd.com">京东</a>'); 添加到指定元素内部的前面 $(A).prepend(B) // 把B前置到A $(B).prependTo(A) // 把B前置到A 示例 $('a').prependTo($('div')); 添加到指定元素外部的后面 $(A).after(B) // 把B放到A的后面 $(B).insertAfter(A) // 把B放到A的后面 添加到指定元素外部的前面 $(A).before(B) // 把B放到A的前面 $(B).insertBefore(A) // 把B放到A的前面 移除和清空元素 remove() // 从DOM中删除所有匹配的元素,包括自己也删除 empty() // 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在 $('div').remove(); // 清空包括div自己的数据 $('div').empty(); // 清空div标签里面的数据 替换 replaceWith() replaceAll() 示例: var a = document.createElement('a') a.href = 'http://www.baidu.com'; a.innerText = 'xxx'; $('span').replaceWith(a); // 用a标签替换span标签 $(a).replaceAll('span'); // 用a标签替换span标签 clone()克隆 <button class="btn">屠龙宝刀,点击就送!</button> $('.btn').click(function () { // var a = $(this).clone(); // 克隆标签 var a = $(this).clone(true); // 括号内加一个true,连带事件一起克隆 $(this).after(a); })
事件
事件绑定方式
<script>
// 方式一
$('.c1').click(function () {
$(this).css({'background-color':'purple'})
})
// 方式二
$('.c1').on('click',function () {
$(this).css({'background-color':'purple'})
})
</script>
常用事件
click 左键点击事件 //获取光标触发的事件 $('[type="text"]').focus(function () { $('.c1').css({'background-color':'black'}); }); //失去光标(焦点)触发的事件 $('[type="text"]').blur(function () { $('.c1').css({'background-color':'purple'}); }); //域内容发生改变时触发的事件 $('select').change(function () { $('.c1').toggleClass('cc'); }); //鼠标悬浮触发的事件 // $('.c1').hover( // //第一步:鼠标放上去 // function () { // $(this).css({'background-color':'blue'}); // }, // //第二步,鼠标移走 // function () { // $(this).css({'background-color':'yellow'}); // } // ) // 鼠标悬浮 等同于hover事件 // 鼠标进入 // $('.c1').mouseenter(function () { // $(this).css({'background-color':'blue'}); // }); // 鼠标移出 // $('.c1').mouseout(function () { // $(this).css({'background-color':'yellow'}); // }); // $('.c2').mouseenter(function () { // console.log('啦啦啦啦'); // }); // 鼠标悬浮事件 // $('.c2').mouseover(function () { // console.log('啦啦啦啦'); // }); // mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象 //键盘按下触发的事件 eevent事件对象 $(window).keydown(function (e) { // console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件 if (e.keyCode === 37){ $('.c1').css({'background-color':'red'}); }else if(e.keyCode === 39){ $('.c1').css({'background-color':'green'}); } else { $('.c1').css({'background-color':'black'}); } }) // 键盘抬起触发的事件 $(window).keyup(function (e) { console.log(e.keyCode); }) input事件: 22期百度:<input type="text" id="search"> <script src="jquery.js"></script> <script> $('#search').on('input',function () { console.log($(this).val()); }) </script>
事件冒泡
-
冒泡的意思就是因为html可以嵌套，如果你给儿子标签绑定了点事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件
<style> #d1{ background-color: red; height: 200px; } #d2{ background-color: green; height: 100px; 100px; } </style> <div id="d1"> <div id="d2"></div> </div> <script src="jquery.js"></script> <script> $('#d1').click(function () { alert('父级标签'); }); $('#d2').click(function () { alert('子级标签'); }); </script>
阻止后续事件发生
$('#d1').click(function () {
alert('父级标签');
});
$('#d2').click(function (e) {
alert('子级标签');
return false;
// e.stopPropagation();
});
事件委托
-
事件委托是通过事件冒泡的原理.利用父级标签捕获子标签的事件,将未来添加进来的某些子标签自动绑定上事件
<div id="d1"> <button class="c1">xin</button> </div> <script src="jqu.js"></script> <script> // 将button按钮选择器选中的标签的点击事件委托给了$('#d1') $('#d1').on('click','.c1',function () { alert('未成年禁入'); var btn = document.createElement('button'); $(btn).text('xin'); $(btn).addClass('c1'); console.log(btn); console.log($(this)); // this还是点击的那个button按钮 $('#d1').append(btn) // 添加到div标签里面的后面 }) </script>