优雅的jQuery详解
来源：互联网 发布：大数据销售是做什么的 编辑：程序博客网 时间：2024/05/16 15:13
jquery
定义：为了简化JavaScript的开发，封装了很对预定义的对象和实用函数，并兼容各大主流浏览器优点： 1.jQuery是一个简洁的和快速的JavaScript库，使用户更方便的处理HTML。document。events.实现动画效果，方便的为网站提供AJAX交互 2.jQuery的文档说明很全，还有很多成熟的插件可以互补 3.jQuery能够使用户的HTML页面代码和HTML内容分离，方便日后的维护
jquery对象
1.定义：jQuery对象是通过jQuery包装DOM对象产生的对象。概述： jQuery对象是jQuery独有的，如果一个对象是jQuery对象，就可以调用jQuery方法 例如：$("#text").html(); 说明： 获取ID为test的元素内的HTML代码，其中html()是jQuery里的方法 document.getElementById("test").innerHTML; 注意： 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法 同理DOM对象也不能使用jQuery里面的方法 格式： 如果获取的是jQuery的对象，那么在变量前加上$ var $variable=jquery 对象 var variable=DOM 对象
DOM对象转成jQuery对象
转换： 对于一个DOM对象，只需要用$()把DOM对象包装起来就可以获取一个jQuery对象 $（DOM对象）例如： <script language="JavaScript"> $(document).ready(function () { //获取userName的document对象 var usernameElement=document.getElementById("username"); //或对象的value值 alert(usernameElement.value); //需要将DOM对象转换成jQuery对象 var $usernameElement=$(usernameElement); })</script>
jQuery对象转换成Dom对象
转换： 1.将一个jQuery对象转成DOM对象：[index]和.get(index); 2.jquery对象是一个数组对象，通过[index]地方法，得到相对应的懂对象 <script language="JavaScript"> $(document).ready(function () { //获取userName的document对象 var usernameElement=document.getElementById("username"); //或对象的value值 alert(usernameElement.value); //需要将DOM对象转换成jQuery对象 var $usernameElement=$(usernameElement); var $usernameElement=$("#username") //第一种 var usernameElememnt=$usernameElement[0]; //第二种 var usernameElememnt=$usernameElement.get(0); })</script>
jQuery选择器
1.选择器是jQuery的基础，在jQuery中，对事件进行处理，遍历DOM和AJAX都需要依赖选择器2.jQuery选择器写法： $(#username)=document.getElementById("username"); $("tagName")=document.getElementById("tagName");
基本选择器
基本选择器时jQuery中最简单，最常用的选择器： 它通过id,class,标签名来查找DOM元素 #id:$(#id) 返回值：单个元素组成的集合 标签元素： $(element标签) 返回值元素集合 class： $(.class) 说明： 这个标签是直接选择HTML代码中class=“myClass”的元素或元素组（因为在同一个HTML中class是可以存在多个同样值） *： $(*):表示匹配所有的元素 select1,select2....: 用法：$("div,span,p,myclass") 返回值 集合元素 说明： 将每一个选择器匹配到的元素合并后一起返回，可以指定多个选择器，并将匹配的元素合并到一个结果内 例如： <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ipone秒表</title> <style type="text/css"> </style> <script language="JavaScript" src="../js/jquery-1.4.2.js"></script></head><body><input type="button" value="保存" class="mini" name="ok"/><input type="button" value="改变ID为one的元素的背景为#0000ff" id="b1"/><input type="button" value="改变元素名为<div>的所有背景颜色#000fff" id="b2"/><h1>天气热了</h1><h2>天气冷了</h2><div id="one">id为one</div><div id="two" class="mini">id为two，class为mini</div><div class="mini">class是mini</div><script language="JavaScript">//给ID为b1的按钮添加一个点击事件 $("#b1").click(function () { //改变ID为one的元素的背景 $("#one").css("backbroud","red"); });//<input type="button" value="改变元素名为<div>的所有背景颜色#000fff" id="b2"/> $("#b2").click(function () { $("div").css("backgroud","red");//该操作是一个数组//改变class $("#b3").click(function () { $(".mini").css("backgroud","red"); }) //改变所有的元素 $("#b4").click(function () { $("*").css("backgroud","red") })//改变span $("#b5").click(function () { $("span,#two").css("backgroud","red") })//可以并列实现 $("#b6").click(function () { $("span ,#two,#one,mini").css("backgroud","red") }) })</script></body></html>
层次选择器
定义：如果想要通过Dom元素之间的层级关系来获取特定的元素，如：子元素，兄弟元素，需要通过层次选择器ancestor descendant 用法：$("form input"):返回值是集合元素 说明： 在给定的祖先元素下匹配所有的后代元素，可以用“parent>child”parent > child 用法：$("form > input"):返回值 集合元素 说明： 在给定的父元素下匹配所有的子元素 注意：要区分后代元素和子元素 prev+next: 用法：$("label+input"):返回值 集合元素 说明： 匹配所有紧接在prev元素后的next元素 prev ~ siblings: 用法： $("form ~ input"):返回值 集合元素 说明： 匹配prev元素之后的所有siblings元素注意： 1.是匹配之后的元素，不包含该元素在内，并且sibliings匹配的是prev同辈元素，后辈元素不被匹配 2.（“prev ~ div”）选择器只能旋转“#prev”元素后面的同辈元素，而jQuery中国的方法siblings（）与前后位置无关，只要是同辈节点都可以获取例如： <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ipone秒表</title> <style type="text/css">div,span{ width: 140px; height: 140px; margin: 20px; background: #9999cc; border: #000 1px solid; float: left; font-size: 17px; font-family:Roman;} div,mini{ width: 30px; height: 30px; background: #cc66ff; border: #000 1px solid;font-size: 12px; font-family:Roman; } </style> <script language="JavaScript" src="../js/jquery-1.4.2.js"></script></head><body><input type="button" value="保存" class="mini" name="ok"/><input type="button" value="改变<body>内所有的<div>的背景颜色#00ffff" id="b1"/><input type="button" value="改变<body>内子<div>的背景颜色#ff0033" id="b2"/><input type="button" value="改变ID为one的下一个<div>的背景#999388" id="b3"/><input type="button" value="改变ID为two的元素后面的所有兄弟<div>元素的颜色#fff999" id="b4"/><input type="button" value="改变ID为two的元素所有的<div>兄弟元素的背景颜色#0000ff" id="b5"/><input type="button" value="改变ID为two的元素所有的<div>兄弟元素的背景颜色#0000ff"，ID为two不能被选中 id="b6" /><h1>天气热了</h1><h2>天气凉了</h2><div id="one">id为one</div><div id="two" class="mini"> id 为two class为mini <div class="mini">class是mini</div></div><div class="one">class为one<div class="mini">class是mini</div> <div class="mini">class是mini</div></div><div class="one">class是one <div class="mini01">class是mini01</div> <div class="mini">class是mini</div></div><span class="spanone">span</span><script language="JavaScript">$("#b1").onclick(function () { $("body div").css("backgroud","red");});$("#b2").click(function () { $("body > div").css("backgroud","red");})$("#b3").click(function () { $("#one+div").css("backgroud","red");})$("#b4").click(function () { $("#two ~ div ").css("backgroud","red");}) $("#b5").click(function () { $("#two").siblings("div").css("backgroud","red"); })$("#b6").click(function () { $("#two").siblings("div").css("backgroud","red"); $("#two").css("backgroud","red");})</script></body></html>
过滤选择器
定义：过滤选择器主要是通过特定的过滤规则来筛选所需的Dom元素，该选择器以“：”开头过滤器可以分为： 基本过滤 内容过滤 可见性过滤 属性过滤 子元素过滤 表单对象属性过滤 first 用法：$("tr:first");返回值 单个元素组成的集合 说明： 匹配找到第一个元素 last： 用法：$("tr:last"):返回值 集合元素 说明：匹配找到最后一个元素，与：first相对应 not(selector) 用法：$("input:not(:checked)") 返回值 集合元素 说明： 去除所有与给定选择器匹配的元素，有点类似“非”,就是没有被选中的意思 input(当input的type="checkbox") even: 用法：$("tr:even") 返回值 集合元素 说明： 表示匹配所有索引值为偶数的元素，从“0”开始计数，js的数组都是从0开始计算， 如：要选泽table中行，因为是从0开始计数，所以table中的第一个tr为偶数0 odd: 用法： $("tr:odd")返回值 集合元素 说明： 表示匹配所有索引为奇数的元素和even对应，从0开始计数 eq(index): 用法：$("tr:eq(0)") 返回值 集合元素 说明： 表示【匹配一个给定索引值的元素，eq(0)获取第一个tr元素，括号里是索引值，不是元素的排列数 gt(index): 用法：$("tr:gt(0)") 返回值 集合元素 说明：表示匹配所有大于给定索引值的元素 lt(index) 用法：$("tr:glt(0)") 返回值 集合元素 说明：表示匹配所有小于给定索引值的元素 header(固定写法) 用法： $(":header").css("backgroud","red")返回值 集合元素 说明： 表示匹配 如：h1,h2,h3之类的标题元素，就是专门用来获取h1,h2,h3这样的标题元素
内容过滤选择器
内容过滤器的过滤规则主要体现在它所包含的子元素和文本的内容上contains(text)用法： $("div:contains('john')")返回值 集合元素 说明： 表示匹配包含给定文本的元素，当选择的不是DOM标签元素时，就使用该选择器作用： 查找被标签围起来的文本内容是否符合指定的内容 empty： 用法： $("td:empty") 返回值 集合元素 说明： 表示匹配所有不包含子元素或文本的空元素 has(selector) 用法： $("div:has(p)").addclass("test") 返回值 集合元素（只能包含一层） 说明： 表示匹配含有选择器所匹配的元素 如： $("div:has(p)").addclass("test")：表示给所有包含p元素的div标签加上class="test" parent: 用法： $("td:parent") 返回值 集合元素 说明： 表示匹配含有子元素或者文本元素 例如： <script language="JavaScript">$("#b1").click(function () { $("div:contains('di')").css("backgroud","red");})$("#b2").click(function () { $("div:empty")})$("#b3").click(function () { $("div:has(.mini)").css("backgroud","red");})$("#b4").click(function () { $("div:parent").css("backgroud","red");})</script>
可见过滤选择器
定义：根据元素的可见和不可见状态来选择相应的元素hidden: 用法： $("tr:hidden") 返回值 集合元素 说明： 表示是不可见的元素， 如：input元素的type属性为hidden或者css中 display=“none”都会被匹配到 visible： 用法： $("tr:visible") 返回值 集合元素 说明：表示匹配所有可见的元素<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ipone秒表</title> <style type="text/css"> </style> <script language="JavaScript" src="../js/jquery-1.4.2.js"></script></head><body><input type="button" value="改变所有可见的div元素的背景" id="b1"/><input type="button" value="选取所有不可见的元素，利用jQuery中show()方法让其显示" id="b2"/><input type="button" value="选取所有的文本隐藏域" id="b3"/><script language="JavaScript"> $("#b1").click(function () { $("div:visible").css("backgroud","red"); })$("#b2").click(function () { $(":hidden").show().css("backgroud","red");}) $("#b3").click(function () { $("input:hidden").each(function () { var $obj=$(this); }) })</script></body></html>
属性过滤器
定义：通过元素的属性来获取相对应的元素[attribute]:用法： $("div[id]") 返回值 集合元素说明：表示匹配包含给定属性的元素[attribute=value]:用法： $("inpt[name='news']").attr("checked",true) 返回值 集合元素 说明： 表示匹配给定的属性是某个特定值的元素 [attribute！=value]用法： $("inpt[name！='news']").attr("checked",true) 返回值 集合元素说明： 表示匹配所有不含有指定的属性或者属性不等于特定值的元素此选择器等价于：not([attr=value])[attribute^=value]用法： $("input[name^='news']") 返回值 集合元素说明： 表示匹配给定的属性是某个值开始的属性 [attribute$=value] 用法： $("input[name$='letter']") 返回值 集合元素 说明： 表示匹配给定的属性是以某些值结尾的元素 [attribute*=value]: 用法：$("input[name*='letter']") 返回值 集合元素 说明：表示匹配给定的属性是以包含某些值的元素 [attributeFilter1][attributeFilter2][attributeFilter3] 用法：$("input[id][name$='man']") 返回值 集合元素 说明： 表示复合属性选择器，需要同时满足读个条件，是一个组合 例如： <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ipone秒表</title> <style type="text/css"> </style> <script language="JavaScript" src="../js/jquery-1.4.2.js"></script></head><body><input type="button" value="含有title的div元素" id="b1"/><input type="button" value="属性title值等于test的div元素" id="b2"/><input type="button" value="属性title值不等于test的div元素（没有属性title的也将被选中）" id="b3"/><input type="button" value="属性title值以te开头的div元素" id="b4"/><input type="button" value="属性title值以est结尾的div元素" id="b5"/><input type="button" value="属性title值含有es的div元素" id="b6"/><input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素" id="b7"/><script language="JavaScript">$("#b1").click(function () { $("div[title]").css("backgroud","red");})$("#b2").click(function () { $("div[title='test']").css("backgroud","red");})$("#b3").click(function () { $("div[title!='test']").css("backgroud","red");})$("#b4").click(function () { $("div[title^='test']").css("backgroud","red");})$("#b5").click(function () { $("div[title$='est']").css("backgroud","red");})$("#b6").click(function () { $("div[title*='est']").css("backgroud","red");})$("#b7").click(function () { $("div[id][title='es']").css("backgroud","red");})</script></body></html>
子元素过滤选择器
nth-child(index/even/ood/equation)用法： $("ul li:nth-child(2)") 返回值 集合元素说明： 表示匹配其父元素下的第N个子或者奇偶元素，从1开始 first-child: 用法： $("ul li :first-child") 返回值 集合元素 说明： 表示匹配第一个子元素，“：first”只匹配一个元素，而为此选择器将为每一个父元素匹配一个子元素last-child 用法： $("ul li :last-child") 返回值 集合元素 说明： 表示匹配最后一个子元素 only-child: 用法： $("ul li :only-child") 返回值 集合元素 说明： 表示如果某个元素是父元素中唯一的子元素，将会被匹配，如果父元素中还含有其他的元素，那么将不匹配 只有一个子元素才能被匹配 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ipone秒表</title> <style type="text/css"> </style> <script language="JavaScript" src="../js/jquery-1.4.2.js"></script></head><body><input type="button" value="每个子元素" id="b1"/><input type="button" value="属性title值等于test的div元素" id="b2"/><input type="button" value="属性title值不等于test的div元素（没有属性title的也将被选中）" id="b3"/><input type="button" value="属性title值以te开头的div元素" id="b4"/><input type="button" value="属性title值以est结尾的div元素" id="b5"/><input type="button" value="属性title值含有es的div元素" id="b6"/><input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素" id="b7"/><script language="JavaScript">//子元素选择器的特点：在每一个特定的元素下寻找子元素//设置div里面的class为one $("#b1").click(function () { $("div.one:nth-child(2)").css("backgroud","red"); })$("#b1").click(function () { $("div.one:first-child").css("backgroud","red");})$("#b1").click(function () { $("div.one:last-child").css("backgroud","red");})$("#b1").click(function () { $("div.one:only-child").css("backgroud","red");})</script></body></html>
表单对象属性过滤选择器
定义：此选择器主要对所选的表单元素进行过滤enabled: 用法： $("input:enabled") 返回值 集合元素 说明： 表示匹配所有可以元素，查找所有input中不带disabled="disabled"的input，不为disabled，就是enabled disabled： 用法： $("input:disabled") 返回值 集合元素 说明： 表示匹配所有不可以的元素，和enabled对应 checked： 用法： $("input:checked") 返回值 集合元素 说明： 表示所有选中的元素（复选框，单选框，不包括select中option）selected： 用法： $("select option:selected") 返回值 集合元素 说明： 表示匹配所有选中的option元素
表单选择器
input 用法： $(":input") 返回值 集合元素 说明： 表示匹配所有的input/textarea/select/button元素 text： 用法： $(":text") 返回值 集合元素 说名：表示匹配所有的单行文本框 password： 用法： $(":password") 返回值 集合元素 说明: 表示匹配所有的密码框radio用法： 用法： $(":radio") 返回值 集合元素 说明: 表示匹配所有的单选按钮 checkbox 用法： $(":checkbox") 返回值 集合元素 说明: 表示匹配所有的复选框 submit： 用法： $(":submit") 返回值 集合元素 说明: 表示匹配所有的提交按钮 image： 用法： $(":image") 返回值 集合元素 说明: 表示匹配所有的图像域 reset 用法： $(":reset") 返回值 集合元素 说明: 表示匹配所有的重置按钮 button 用法： $(":button") 返回值 集合元素 说明: 表示匹配所有的按钮 file： 用法： $(":file") 返回值 集合元素 说明: 表示匹配所有的文件域
jQuery中DOM操作
内部插入节点
append（content） 表示向每一个匹配的元素的内部的结尾处追加内容appendTo（content） 表示：表示价格每一匹配的元素追加的指定元素中的内部结尾处prepend(content) 表示向每一个匹配元素的内部的开始从插入内容 prependTo(content） 表示将每一个匹配的元素插入到指定元素内部的开始处
外部插入
after(content) 表示在每一个匹配的元素之后插入内容 before(content） 表示在每一个匹配的元素之前插入 insertAfter（content） 表示把所有匹配的元素插入到另一个指定的元素或元素集合的后面 insertBefore（content） 表示把所有匹配的元素插入到另一个指定的元素或元素集合的前面
查找节点
查找属性节点：通过jQuery选择器完成，或者查找到所需的元素之后，可以调用jQuery 里的attr()方法来获取它的各种属性值创建节点
创建节点：使用jQuery的工厂函数$();$(html):会根据传入的HTML标记字符串创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象返回注意： 1.动态创建的新元素节点不会自动添加到文档中，而是需要使用其他的方法插入到文档中 2.当创建单个元素时，需要注意闭合标签和使用标准的xhtml格式 如： 创建一个<p>元素 ，可以使用$("<p/>")或者$("<p></p>") 不能使用方式： $("<p>")或$("</p>") 创建文本节点就是在创建元素节点时直接把文本内容写出， 创建属性节点也可以在创建元素节点时一同创建
删除节点
remove（）：表示从DOM中删除所有匹配的元素，，传入的参数用于根据jQuery表达式筛选元素注意： 当某个节点用remove（）方法删除后，该节点所包含的所有的后代节点都将同时被删除 返回值：一个指向已被删除的节点的引用
阅读全文
0 0
- 优雅的jQuery详解
- 优雅的JavaScript-BOM详解
- 优雅的JavaScript-定时器详解
- 优雅的JavaScript-多媒体详解
- jquery dialog-优雅的弹出框
- 推荐一款优雅的jquery手风琴特效
- 一款优雅的jquery手风琴特效
- 高效而优雅的编写jQuery
- jquery dialog-优雅的弹出框
- WebView详解一：打造优雅的WebView
- 优雅的JavaScript-基础语法详解
- 使用JQuery——更优雅的编写脚本
- 推荐 25 个优雅的 jQuery Tooltip 插件
- 读jQuery之四（优雅的迭代）
- 一款优雅的Jquery网页弹幕插件,各种用途
- jQuery实战6:优雅的弹窗效果
- 【转】docker容器如何优雅的终止详解
- Springboot-mybatis-maven-generator详解优雅的结合
- HDOJ 1269 迷宫城堡 （Tarjan + 强连通分量）
- 独木舟上的旅行
- 6个月的程序员修炼
- [leetcode]142. Linked List Cycle II
- Just for mark : Mac Idea maven--> jetty:run :debug 卡顿半年解决方案
- 优雅的jQuery详解
- ArcGIS Server和Data Store的注销与重新配置（以10.5.1为例）
- 17暑假多校联赛1.2 HDU 6034 Balala Power!
- 还有8天就赶上进度了
- 浅谈HTTP中Get与Post的区别
- 反向迭代器（rbegin,rend）
- 静态顺序表的实现（C语言）
- Java实现抓取百度识图结果的实现和思路-3-实现断点传输
- ios-动画实现修改约束
