jquery方法找到的对象叫做jquery对象,原生js方法找到的标签对象叫做DOM对象,有各自的方法
jquery对象和DOM对象互相转换
jquery对象---DOM对象: jquery对象[0].style.backgroundColor = 'red'
dom对象 --- jquery对象: $(DOM对象).css('background-color','red')
jQuery引入
将jqyery写入本地文件,在script标签内引入jquery文件路径
<script src = 'jquery文件路径'></script>
<script>
'jquery代码'
</script>
查找标签
基本选择器
id选择器 $('#id')
标签选择器 $('标签名')
class选择器 $('.类名')
组合选择器 $('#id,.d1')
层级选择器
后代选择器 $('x y') x的所有后代y
子代选择器 $('x > y') x的所有子代y
毗邻选择器 $('x + y') 找到紧挨在x后面的标签y
兄弟选择器 $('x ~ y') x之后所有的同级y
基本筛选器
$('选择器:first') 获取匹配的第一个元素
$('选择器:last') 获取匹配的最后一个元素
$('选择器:eq(索引)') 索引等于index的那个元素
$('选择器:even') 匹配所有索引值为偶数的元素，从 0 开始计数
$('选择器:odd') 匹配所有索引值为奇数的元素，从 0 开始计数
$('选择器:gt(索引)') 匹配所有大于给定索引值的元素
$('选择器:lt(索引)') 匹配所有小于给定索引值的元素
$('选择器:not(选择器)') 移除所有满足not条件的标签
$('选择器:has(选择器)') 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
# 多用于input标签
[属性] $('input[type]')
[属性=值] $('input[type=text]') 查找type=text类型的input标签
[属性!=值] $('input[type!=text]') 查找type不等于text类型的input标签
表单筛选器
# 多用于input标签,通过属性选择器也可以查找到
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
$(":checkbox") 找到所有的checkbox类型的input标签
表单对象属性选择器
在input标签内设置 <input type="text" disabled> 表示这个输入框不可用 <input type="text" checked> 表示这个选择框默认被选中 <input type="text" selected> 表示这个下拉选项默认被选中 :enabled :disabled :checked :selected 注意: 在使用checked属性查找时,会把input标签中有checked属性的标签和select下拉选项中被选中的标签都筛选出来, 一般在checked属性前加input,表示筛选input标签中有checked属性的标签 <input type="checkbox" checked>抽烟 <input type="checkbox" checked>喝酒 <input type="checkbox">烫头 <select name="" id="s1"> <option value="">朝阳</option> <option value="" selected>海淀</option> <option value="">昌平</option> <option value="">东城</option> </select> $(':checked') 会查找出3条结果,包括option=海淀的标签 $('input:checked') 结果是两条 $(':selected') 查找被选中的option
筛选器方法
下一个元素
$("选择器").next()
$("选择器").nextAll()
$("选择器").nextUntil("#i2") 直到找到id为i2的标签就结束查找，但是不包含它
上一个元素
$("选择器").prev()
$("选择器").prevAll()
$("选择器").prevUntil("#i2") 直到找到id为i2的标签就结束查找，但是不包含它
父亲元素
$("选择器").parent()
$("选择器").parents() 查找当前元素的所有的父辈元素（所有祖先辈,直到html）
$("选择器").parentsUntil('body') 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签
儿子和兄弟元素
$("选择器").children(); 子辈们
$("选择器").siblings("#id"); 同级兄弟们,不包含自己,还可以添加元素进行进一步筛选
查找
find 查找后代
$("div").find("p") 等价于$("div p") 查找div标签中的字标签p
筛选
$("div").filter(".c1") 等价于 $("div.c1") 从所有的div标签中过滤出有class='c1'属性的div
和前面写在选择器内:first的作用一致,也可以写在对象后面,使用.的形式
.first() 获取匹配的第一个元素
.last() 获取匹配的最后一个元素
.not() 从匹配元素的集合中删除与指定表达式匹配的元素
.has() 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() 索引值等于指定值的元素
操作标签
样式操作
addClass() 添加指定的CSS类名
removeClass() 移除指定的CSS类名
hasClass() 判断样式存不存在
toggleClass() 切换CSS类名，如果有就移除，如果没有就添加
还可以直接操作CSS属性修改样式:
$("p").css("color", "red") 将p标签的字体颜色设置成红色
$(".c1").css({"geight":200px,"width":200px}) 如果要修改多个属性,需要用对象的形式设置键值对
位置操作
.offset() 相对于页面左上角的距离,也可以通过设置移动位置
.offset({top:200,left:200})
.position() 相对于父级标签(设置了position:relative或absolute)的距离,如果没有,则根据浏览器左上角,不能设置位置
$(window).scrollTop() 滚轮向下移动的距离
$(window).scrollLeft() 滚轮向左移动的距离
尺寸
.height() 内容content的高度
.width() 内容content的宽度
.innerHeight() 内容content高度 + 两个padding的高度
.innerWidth() 内容content高度 + 两个padding的宽度
.outerHeight() 内容高度 + 两个padding的高度 + 两个border的高度
.outerWidth() 内容高度 + 两个padding的高度 + 两个border的宽度
文本
.text() 获取匹配元素的文本内容,不包括标签
.text('内容') 可以设置新的内容,替换之前的文本内容
.html() 获取第一个匹配元素的html内容,包括标签
.html('内容') 设置新的内容替换之前的内容,可以识别标签
值操作
// 查看选中的值
radio $(':radio:checked').val()
checkbox $(':checkbox:checked').val()
select单选下拉框 $('select').val()
select多选下拉框 $('select').val()
// 设置值
radio $(':radio').val([值])
checkbox $(':checkbox').val([值1,值2])
select单选下拉框 $('select').val(值)
select多选下拉框 $('select').val([值1,值2])
注意: 在使用checked或者selected查找值时,如果找到两个对象,但是取值的时候只返回第一个的值,所以需要循环取值
for(var i in $('input:checked')) {
console.log($('input:checked').eq(i).val())}
属性操作
attr(属性名) 通过属性名查找值
attr(属性名,值) 设置属性
attr({属性名:值,属性名:值}) 设置多个属性值
removeAttr() 删除属性
prop() 判断标签的状态 checked selected disabled 返回布尔值
标签对象.prop('checked',true) 将标签对象设置为选中状态
文档处理
$(A).append(B) 把B追加到A的内部的后面
$(A).appendTo(B) 把A追加到B的内部的后面
$(A).prepend(B) 把B追加到A的内部的前面
$(A).prependTo(B) 把A追加到B的内部的前面
$(A).after(B) 把B添加到A的外部的后面(同级)
$(A).insertAfter(B) 把A追加到B的外部的后面(同级)
$(A).before(B) 把B添加到A的外部的前面(同级)
$(A).insertBefore(B) 把A追加到B的外部的前面(同级)
remove() 将标签对象及对象里面的元素全部删除
empty() 将标签对象里面的内容清空,但是调用这个方法的标签对象还在
$(A).replaceWith(B) 将A替换成B
$(A).replaceAll(B) 将B替换成A
克隆
clone() 复制标签的所有内容,但是不复制绑定的事件
clone(true) 复制标签的所有内容,包括事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="d1">嗨</button> <script src="jquery.js"></script> <script> $('#d1').click(function () { $(this).clone(true).insertAfter($(this)); }) </script> </body> </html>
事件
click 点击
hover 鼠标移动上去 不能用on绑定,可以用mouseenter和mouseleave实现效果
blur 光标移开
focus 光标
change 内容发生变化
keyup 键盘抬起
keydown 键盘按下
mouseover 如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发
mouseenter 不管有没有子标签都只触发一次
mouseleave 鼠标移开
// keydown 在jquery中查看键盘按键对应的值 <script> $(window).keydown(function (event) { console.log(event.keyCode) }) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th></th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>aa</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>bb</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>cc</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>dd</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>ee</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> </tbody> </table> <script src="jquery.js"></script> <script> var flag = false; $(window).keydown(function (event) { if (event.keyCode === 16) { flag = true } }); $(window).keyup(function (event) { if (event.keyCode === 16) { flag = false } }); $('select').change(function () { var bechecked = $(this).parent().siblings().first().find(':checkbox').prop('checked'); if (flag && bechecked) { var value = $(this).val(); var beselected = $('input:checked').parent().parent().find('select'); beselected.val(value) } }) </script> </body> </html>
绑定
对象.事件(function(){})
对象.on('事件',function(){})
移除事件
off()
$('li').off('click') 将li标签移除点击事件
事件冒泡
执行子标签绑定的事件,也会触发父级标签的事件
阻止事件冒泡
在函数内最后 return false 或者 event.stopPropagation()
事件委托
$("tbody").on("click", ".fire", function (){ // tbody为fire的父级标签,将事件委托给父级标签
$(this).parent().parent().remove() // this触发的还是子标签
});
动画效果
show(毫秒数)
hide()
slideDown() 滑上滑下
slideUp()
slideToggle()
fadeIn() 淡入淡出
fadeOut()
fadeToggle()
each循环
li =[10,20,30,40]
$.each(li,function(i, v){ // i是索引 v是数组中的每个元素
console.log(i, v);
})
$('选择器').each(function(i,v){
console.log(i,v)
})
终止循环
return false
data
.data('键','值') 设置值,封装数据
.data('键') 取值,没有的话返回undefined
removeData('键') 通过键移除值
插件
$.extend({ min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function max:function(a, b){return a > b ? a : b;}, }); $.min() // 调用 $.max() $.fn.extend({ // fn 标签对象 表示通过标签可以调用 min:function(a, b){return a < b ? a : b;} }); $('div').min()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; } .cover { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); z-index: 99; } .user_msg { position: fixed; width: 600px; height: 400px; background-color: white; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000; } .hide { display: none; } </style> </head> <body> <div> <button id="all">全选</button> <button id="reverse">反选</button> <button id="cancel">取消</button> </div> <div> <button id="add_msg">添加记录</button> </div> <div class="cover hide"></div> <div class="user_msg hide"> 姓名:<input type="text" id="user"> 爱好:<input type="text" id="hobby"> <button id="commit">提交</button> <button id="qx">取消</button> </div> <table border="1"> <thead> <tr> <th></th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>张三</td> <td>抽烟</td> <td><button class="fire">删除</button></td> <td><button class="edit">编辑</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>李四</td> <td>喝酒</td> <td><button class="fire">删除</button></td> <td><button class="edit">编辑</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>王五</td> <td>烫头</td> <td><button class="fire">删除</button></td> <td><button class="edit">编辑</button></td> </tr> </tbody> </table> <script src="jquery.js"></script> <script> //全选 $('#all').click(function () { $(':checkbox').prop('checked',true); }); //取消 $('#cancel').click(function () { $(':checkbox').prop('checked',false) }); //反选 $('#reverse').click(function () { var checked = $('input:checked'); var unchecked = $('input:not(:checked)'); checked.prop('checked',false); unchecked.prop('checked',true); }); //模态对话框 $('#add_msg').click(function () { $('#user,#hobby').val(''); $('.cover,.user_msg').removeClass('hide'); }); //提交 增加新纪录 $('#commit').click(function () { $('.cover,.user_msg').addClass('hide'); var name = $('#user').val(); var hobby = $('#hobby').val(); var $editTr = $(this).data('xyh'); if ($editTr === undefined) { var new_tr = document.createElement('tr'); if (name.length !==0 && hobby.length !==0) { $(new_tr).append('<td><input type="checkbox"></td>'); $(new_tr).append('<td>'+ name +'</td>'); $(new_tr).append('<td>'+ hobby +'</td>'); $(new_tr).append('<td><button class="fire">删除</button></td>'); $(new_tr).append('<td><button class="edit">编辑</button></td>'); $('tbody').append(new_tr); } else { alert('内容不能为空!') } } else { $editTr.children().eq(1).text(name); $editTr.children().eq(2).text(hobby); $('#commit').removeData('xyh'); } }); // 模态对话框的取消 $('#qx').click(function () { $('.cover,.user_msg').addClass('hide'); }); //删除 事件委托 $('tbody').on('click','.fire',function () { $(this).parent().parent().remove() }); // 编辑 $('tbody').on('click','.edit',function () { $('.cover,.user_msg').removeClass('hide'); var name_value = $(this).parent().prev().prev().prev().text(); var hobby_value = $(this).parent().prev().prev().text(); $('#user').val(name_value); $('#hobby').val(hobby_value); var $currentTr = $(this).parent().parent(); $('#commit').data('xyh', $currentTr); }) </script> </body> </html>