一,jQuery 知识详解
利用jquery 查找元素,操作元素
1,jquery 引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">123</div> <script src="jquery-1.12.4.js"></script> #下载jq文件并放到本地 $("#id") #jq引用jQuery方法或者$ $符相当于jQuery #$("#id")利用jQuery或者i1标签 $("#id").xxxx xxxx为jQuery方法 </body> </html>
2,jquery和DOM之间的转换
jquery对象[0] => DOM 对象,DOM 对象 => $(DOM对象)
3,jquery 选择器
1,标签选择器
(1)根据id查找 $(‘#id‘)
(2)根据class查找 $(".c1")
(3)标签选择器 $(‘a‘) 选取所有的a标签
(4)组合选择器 $(‘a,.c2,#i10‘) 找到所有的a标签和所有的class为c2的标签,以及ID为i10的标签
2,层级选择器
(1)$(‘#i10 a‘) 先找到id 为i10的标签,然后再找i10下面的子子孙孙a标签
(2)$(‘#i10>a‘)只找i10下面的子标签为a为标签
3,筛选器
(1)$(‘#i10>a:first)找到id为i10的子标签的第一个a标签,:last 表示最后一个用法同:first
(2)$(‘#i10 a:eq(0)‘) 找到id为i10的所有a标签并且索引值为0的a标签 :gt(index),:lt(index)用法同:eq
4,根据属性查找
(1)$(‘[alex]‘) 找到所有具有属性alex的标签
(2)$(‘[alex="123"]‘) 找到具有属性alex且值为123的标签,注意双引号
(3)$("input[type=‘text‘]") 找到所有input 标签 type属性为text的标签
5,表单选择器
(1)$(":test") 找到所有的input标签type属性为text的标签
(2)$(":disabled") 找到所有表单对象中不可编辑的标签
6,全选,反选,取消示例代码
(1)$(‘#tb:checkbox‘).prop(‘checked‘,true) 传值表示设置值
(2)$(‘#tb:checkbox‘).prop(‘checked‘) 没传值表示获取值
(3)$(‘#tb:checkbox‘).xxx jquery方法内置循环
(4)$(‘#tb:checkbox‘).each(function(k){
each 为jquery循环
k为当前的索引
this,DOM元素,指当前循环的元素 $(this)为 jquery元素
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();" /> <input type="button" value="反选" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $(‘#tb :checkbox‘).prop(‘checked‘,true); } function cancleAll() { $(‘#tb :checkbox‘).prop(‘checked‘,false); } function reverseAll() { $(‘:checkbox‘).each(function(k){ // this,代指当前循环的每一个元素,并且为dom 对象,需要加$() 转化为jquery对象 /* if(this.checked){ #利用DOM对象处理 this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop(‘checked‘)){ #利用jquery对象处理 $(this).prop(‘checked‘, false); }else{ $(this).prop(‘checked‘, true); } */ // 三元运算var v = 条件? 真值:假值 var v = $(this).prop(‘checked‘)?false:true; $(this).prop(‘checked‘,v); }) } </script> </body> </html>
7,jquery操作class
(1) $(‘#i1‘).addClass(‘hide‘) 增加hide class $(‘#i1‘).removeClass(‘hide‘)移除hide class
8,筛选器
在筛选器中可以增加参数,例如find(“#i1”)
(1)$(this).next() 获取当前标签的下一个标签
(2)$(this).prev() 获取当前标签的上一个标签
(3)$(this).parent() 获取当前标签的父标签
(4)$(this).children()获取当前标签的子标签
(5)$(this).sibings() 获取当前标签的兄弟标签
(6)$(this).parent().find(“.content”) 获取父级标签的子子孙孙标签中所有的class 包含content的标签
左侧菜单示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content hide">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘.header‘).click(function(){ $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘) }) </script> </body> </html>
(7)和$(‘li:eq(1)‘)类似的方法$(‘li‘).eq(1) 同.eq(1) 类似的还有first(),last(),hasClass(class)
(8)$(‘#i1‘).next() 找到下一个 $(‘#i1‘).nextAll()找到下面所有的 $(‘#i1‘).nextUntil(‘#i1‘) 找到下面所有的知道id为i1的标签
9,文本操作
(1) $(..).text() #选择器加上.text() 方法获取标签的内容
(2) $(..).text(“<a>1</a>”) .text的括号中加上内容为修改标签的内容
(3) $(..).html() #获取标签
(4) $(..).html("<a>1</a>") #设置标签内容
(5) $.(..).val() #获取值
(6) $.(..).val() #设置值
10,样式操作
<script> #开关灯代码 $(‘#i1‘).click(function(){ if($(‘.c1‘).hasClass(‘hide‘)){ $(‘.c1‘).removeClass(‘hide‘); }else $(‘.c1‘).addClass(‘hide‘); $(‘.c1‘).toggleClass(‘hide‘) #用一句可以替代上面的if{}else{}语句 }) </script>
11,自定义属性的操作
(1)$(..).attr
$(..).attr(‘n‘) 获取自定属性的值 例$(‘#i1‘).attr(‘file‘)获取id为i1的标签的file 属性的值
$(..).attr(‘n‘,‘v‘) 为标签n 属性设置值为v
$(..).removeAttr(‘n‘) 取标签的n属性
(2)$(..).prop 用于checkbox,radio选中操作 用法同attr
12,CSS cursor:pointer; 点击设置为小手
13,增加标签
<script> $(‘#a1‘).click(function () { var v = $(‘#t1‘).val(); var temp = "<li>" + v + "</li>"; // $(‘#u1‘).append(temp); #在获取的标签下面添加标签 $(‘#u1‘).prepend(temp); #在获取的标签的上面添加标签 // $(‘#u1‘).after(temp) #在最外边的后面添加标签 // $(‘#u1‘).before(temp) #在最外边的上面添加标签 }); $(‘#a2‘).click(function () { var index = $(‘#t1‘).val(); //$(‘#u1 li‘).eq(index).remove(); #删除文本内容 //$(‘#u1 li‘).eq(index).empty(); #清空文本内容 }); $(‘#a3‘).click(function () { var index = $(‘#t1‘).val(); var v = $(‘#u1 li‘).eq(index).clone(); $(‘#u1‘).append(v); //$(‘#u1 li‘).eq(index).remove(); //$(‘#u1 li‘).eq(index).empty(); })
14 ,滚轮设置
(1) scrollTop([val]) 上线滚轮
(2)scrollLeft([val]) 左右滚轮
15,事件绑定
(1) $(‘.c1‘).click() 绑定click事件
(2) $(‘.c1‘).bind(‘click‘,function(){}) 绑定click事件
(3) $(‘.c1‘).unbind(‘click‘,function(){}) 解绑定
(4) $(‘.c1‘).delegate(‘a‘,‘click‘,function(){}) 给c1下面的所有的a标签绑定一个事件,以委托的方式绑定
(5) $(‘.c1‘).undelegate(‘a‘,‘click‘,function(){}) 给c1下面的所有的a标签解绑定
(6) $(‘.c1‘).on(‘click‘.function(){}) 给c1绑定click事件
(7) $(‘.c1‘).off(‘click‘,function(){}) 给c1解绑定click事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a> <script src="jquery-1.12.4.js"></script> <script> function ClickOn() { alert(123); return true; #绑定事件执行 } $(‘#i1‘).click(function () { alert(456); return false; #绑定事件不执行 }) </script> </body> </html>