下载链接: [jquery官网](https://jquery.com/)，首先需要下载这个jquery的文件，然后在html文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
引入: <script src = 'jquery.js'> </script>
jquery找到的对象称为 --> jquery对象
原生js找到的标签称为 --> dom对象
dom对象只能使用dom对象的方法,不能使用jquery对象的方法,jquery对象也是,它不能使用dom对象的方法
dom对象和jquery对象互相转换:
jquery对象转dom对象 -- jquery对象[0] 示例: $('#d1')[0]
dom对象转jquery对象 -- $(dom对象)
不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过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() // 滚轮向右移动的距离
// 滚动事件.监听滚动事件来显示或者隐藏标签
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.c1{
background-color: green;
height: 4000px;
width: 100px;
}
.s1{
position: fixed;
left:20px;
bottom:20px;
height: 30px;
width: 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 -- 针对的是checked\selected\disabled..
查看标签是否有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事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
//键盘按下触发的事件 e\event事件对象
$(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;
width: 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>
如对本文有疑问， 点击进行留言回复！！
网友评论