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总结
<!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>
