jQuery
jquery初识
jquery对象 DOM对象 $('div')得到的是jquery对象--(加索引)--》dom对象 dom对象--$(dom对象)-->jquery对象 $('div');//得到的是jquery对象 jQuery.fn.init(3) [div.c1, div.c2, div.c3, prevObject: jQuery.fn.init(1)]0: div.c11: div.c22: div.c3length: 3prevObject: jQuery.fn.init [document]__proto__: Object(0) $('div')[0];//jquery+索引得到dom对象 <div class="c1">div1</div> $($('div')[0]);//$(dom对象)--》jquery对象 jQuery.fn.init [div.c1] 0: div.c1 length: 1 __proto__: Object(0)
选择器(查找标签)
基本选择器(同css)
层级选择器
基本筛选器(选择之后进行过滤)
属性选择器
表单筛选器(多用于form表单的input标签)
筛选器方法
操作标签
样式操作(添加或删除class类的值来实现)
位置操作
尺寸操作
文本操作
选择器
选择器(查找标签) 基本选择器(同css) id选择器 $('#d1'); 标签选择器 $('div'); class选择器 $('.c1'); 配合使用 $('div.c1')//找到类名为c1的div标签 层级选择器 $('div p');//找到div标签下面的所有子标签p $('div>p');//找到div的所有儿子p标签 $('div+p');//毗邻选择器 $('div~p');//兄弟选择器 基本筛选器(选择之后进行过滤) :first//找到该标签中的第一个元素 :last//最后一个 :eq(index)//取相对应索引 :even//偶数,从0开始 :odd//奇数,从0开始 :not(元素选择器)//移除所有满足not条件的标签,找到的是子标签 div:has(元素选择器)//所有满足has条件的标签,找的是满足条件的div标签 //注意: $("div:has(h1)")// 找到所有后代中有h1标签的div标签,意思是首先找到所有div标签,把这些div标签的后代中有h1的div标签筛选出来 $("div:has(.c1)")// 找到所有后代中有c1样式类(类属性class='c1')的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签 属性选择器:(//多用于input标签) [属性] [属性=值]//找属性等于值的标签 [属性!=值]//找属性等于值的标签 表单筛选器(多用于form表单的input标签) //重点,循环的取多选的value值在对应内容 for (var i in $(':checked')){ console.log($('input:checked').eq(i).val()); } 表单对象帅选器 :enabled :disabled :checked//有坑,会把option标签,所以一般要+input:checked $(':checked'); jQuery.fn.init(3) [input, input, option, prevObject: jQuery.fn.init(1)] :selected 筛选器方法 下一个元素 $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找,不包含#i2 上一个元素 $("#id").prev() $("#id").prevAll()//注意顺序 $("#id").prevUntil("#i2") 父亲元素 $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到) $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。 儿子和兄弟元素 $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选 find和filter $('div').find('input');//div下找input标签,找到是子子孙孙 $('div').filter('.c1');//就是找div标签 class为c1的div
标签操作
操作标签 样式操作(添加或删除class类的值来实现) 添加类 对象.addCladd('c1'); 删除类 对象.removeClass('c1'); 判断是否存在: 对象.hasClass(); 切换类有就移除,没有就添加 对象.toggleClass();////注意不要重名操作 css操作 //$('.c1').css('background-color','green'); jQuery.fn.init [div.c1, prevObject: jQuery.fn.init(1)] //$('.c1').css({width:20}); 位置操作 $('.c1').offset(); {top: 119, left: 8} $('.c1').position(); {top: 119, left: 8} .offset()方法允许我们检索一个元素相对于文档(document)的当前位置。 和 .position()的差别在于: .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离, 如果找不到这样的元素,则返回相对于浏览器的距离。 //鼠标操作 $(window).scrollTop() //滚轮向下移动的距离 $(window).scrollLeft() //滚轮向左移动的距离 尺寸操作 height() //盒子模型content的大小,就是我们设置的标签的高度和宽度 width() innerHeight() //内容content高度 + 两个padding的高度 innerWidth() outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度,不包括margin的高度,因为margin不是标签的,是标签和标签之间的距离 outerWidth() 文本操作 1.html代码: html()// 取得第一个匹配元素的html内容,包含标签内容 html(val)// 插入内容,能识别标签 $('.c1').html(); " xxx <input type="reset"> <input type="reset"> mmm " 2.text代码: text()// 取得所有匹配元素的内容,所有文本内容 text(val)// 插入内容,标签作为文本插入进去 $('.c1').text(); " xxx mmm " 3.val(一般用于有value属性的标签) val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值 //重点,循环的取多选的value值在对应内容 for (var i in $(':checked')){ console.log($('input:checked').eq(i).val()); }
val总结
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>值操作</title> <style> #d1,#d2{ height: 100px; width: 100px; } #d1{ background-color: red; } #d2{ background-color: green; } </style> </head> <body> <div> <input type="radio" name="n1" value="1">男 <input type="radio" name="n1" value="2">女 <input type="checkbox" value="1" >抽烟 <input type="checkbox" value="2" >喝酒 <input type="checkbox" value="3" >汤头 <select name="" id="ss1"> <option value="1">上海</option> <option value="2">北京</option> <option value="3">深圳</option> </select> <select multiple name="" id="ss2"> <option value="1">朝阳</option> <option value="2">沙河</option> <option value="3">昌平</option> </select> </div> <script src="jquery.js"></script> </body> </html>