jquery-选择器、筛选器、样式操作、文本操作、属性操作、文档处理
2018-01-03 19:57
766 查看
选择器
基本选择器
层级选择器
属性选择器
基本筛选器
样式操作
文本操作
属性操作
文档处理
示例
注意:
筛选器
表单筛选器
示例
表单对象属性
示例
CSS
位置
.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。
和.position()的差别在于:.position()是相对于相对于父级元素的位移。
示例代码如下:
尺寸
文本值
值
示例
示例:
用于checkbox和radio
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr(“checked”, “checked”)。
克隆示例代码如下:
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
两种写法:
基本选择器
层级选择器
属性选择器
基本筛选器
样式操作
文本操作
属性操作
文档处理
选择器
基本选择器
$("#id") $(".className") $("tagName") $("#id, .className, tagName") $("div.c1")
层级选择器:
$("x y"); // x的所有后代y(子子孙孙) $("x > y"); // x的所有儿子y(儿子) $("x + y") // 找到所有紧挨在x后面的y $("x ~ y") // x之后所有的兄弟y
属性选择器
[attribute] [attribute=value] // 属性等于 [attribute!=value] // 属性不等于 // 示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到checkbox类型的input标签 $("input[type!='text']"); // 取到类型不是text的input标签
基本筛选器:
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
示例
$("div:has(h1)") // 找到所有后代中有h1标签的div标签 $("div:has(.c1)") // 找到所有后代中有c1样式类的div标签 $("li:not(.c1)") // 找到所有不包含c1 class的li标签 $("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
注意:
这里的has和not不是简单的有和没有的意思,它俩没啥关系(不是一组) :not和:has通常用.not()和.has()代替。 $("div:has(.c1)")等价于$("div .c1")并不等价于$("div.c1")。
筛选器
下一个元素: $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 上一个元素: $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") 父亲元素: $("#id").parent() $("#id").parents() $("#id").parentsUntil() 儿子和兄弟元素: $("#id").children(); // 儿子们 $("#id").siblings(); // 兄弟们 查找元素: $("id").find() // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 补充: .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
表单筛选器
:text :password :file :radio :checkbox :submit :reset :button
示例
$(":checkbox") // 找到所有的checkbox
表单对象属性
:enabled :disabled :checked :selected
示例
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option //或者如下 $("option:selected")
样式操作
样式类addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名,如果有就移除,如果没有就添加。
CSS
css("color", "red") //DOM操作:tag.style.color="red"
位置
offset() // 获取匹配元素在当前视口的相对偏移 position() // 获取匹配元素相对父元素的偏移(测试无效) scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。
和.position()的差别在于:.position()是相对于相对于父级元素的位移。
示例代码如下:
<script> $("#b1").on("click", function () { $(".c1").offset({left: 200, top:200}); }); $(window).on("scroll", function () { if ($(window).scrollTop() > 100) { //. 当向下滚动超过100px, 就把右下角那个返回顶部的按钮显示出来 $("#b2").removeClass("hide"); }else { // 否则就隐藏 $("#b2").addClass("hide"); } }); $("#b2").on("click", function () { $(window).scrollTop(0); }) </script>
尺寸
height() 内容 width() innerHeight() 内容+内填充 innerWidth() outerHeight() 内容+内填充+边框 outerWidth()
文本操作
HTML代码html() // 取得第一个匹配元素的html内容 html(val) // 设置所有匹配元素的html内容
文本值
text() // 取得所有匹配元素的内容 text(val) // 设置所有匹配元素的内容
值
val() // 取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val([val1, val2]) // 设置checkbox、select的值
示例
<label for="s1">城市</label> <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> <hr> <label for="s2">爱好</label> <select id="s2" multiple="multiple"> <option value="basketball" selected>篮球</option> <option value="football">足球</option> <option value="doublecolorball" selected>双色球</option> </select> <hr> <p>爱好</p> <label> <input type="checkbox" name="hobby" value="basketball"/> 篮球 <input type="checkbox" name="hobby" value="football"/> 足球 <input type="checkbox" name="hobby" value="doublecolorball"/> 双色球 </label> <p>性别</p> <label for="radio1">女</label> <input id="radio1" type="radio" name="gender" value="female"/> <label for="radio2">男</label> <input id="radio2" type="radio" name="gender" value="male"/> <script src="jquery-3.2.1.min.js"></script> <script> // 单选下拉框 $("#s1").val("shanghai"); // 多选下拉框 $("#s2").val(["basketball", "football"]); // checkbox $("input[name='hobby']").val(["basketball", "football"]); // 单选框 $("input[name='gender']").val(["female"]); </script>
属性操作
用于自定义属性attr(attrName) // 返回第一个匹配元素的属性值 attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性
示例:
<body> <div id="d1" egon="nb">div</div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 <input type="radio" name="gender" value="11">11 <input type="radio" name="gender" value="22">22 <script src="jquery-3.2.1.min.js"></script> </body>
用于checkbox和radio
prop() removeProp()
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr(“checked”, “checked”)。
文档处理
添加到指定元素内部的后面 $(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() // 从DOM中删除所有匹配的元素。 empty() // 删除匹配的元素集合中所有的子节点。 替换 replaceWith() replaceAll() 克隆 clone() // 参数
克隆示例代码如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>克隆</title> <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀,点击就送</button> <hr> <button id="b2">屠龙宝刀,点击就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加参数true,克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true,克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html> 点击复制按钮
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
两种写法:
$(document).ready(function(){ // 在这里写你的JS代码... }) $(function(){ // 你在这里写你的代码 })
相关文章推荐
- Web29. jQuery选择器 Dom操作 样式 事件处理 动画
- jQuery-对标签元素 文本操作-属性操作-文档的操作
- jQuery入门(3):DOM(选择器,属性,筛选,文档处理)
- Jquery选择器大全、属性操作、css操作、文档、事件等
- jquery选择器,文档处理,属性
- jQuery的属性、css、文档处理、事件、选择器以及jsp要点简记
- jQuery (选择器,属性,筛选,文档处理)
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
- JQuery常用选择器 事件 方法 样式属性操作
- jQuery操作元素的属性与样式(1/2)
- 使用jQuery操作元素的属性与样式
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- jQuery(4)JQuery框架操作元素的属性与样式
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- JQuery操作元素的属性与样式及位置
- Asp.net 更改Alert样式和后台注册Jquery的Ajax异步提交事件[包括处理前操作、处理后操作(注明:此方法只是作为参考,如有需要可自行修改)]
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- jQuery操作属性和样式详解
- JQuery文档分析2--JQuery核心与属性操作
- JQuery操作元素的属性与样式及位置