JQuery学习笔记

来源：互联网发布：侧田情歌知乎编辑：程序博客网时间：2024/06/08 05:41

一.jquery的优势
1.轻量级。采用了UglifyJS进行压缩，大小保持在30KB左右
2.强大的选择器。
3.出色的DOM操作的封装。
4.可靠的事件处理机制。
5.完善的AJAX。JQuery将所有的AJAX操作封装到了一个函数$.ajax()中。
6.不污染顶级变量。JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，不会污染其他的对象。
7.链式操作方式。对发生在同一个JQuery对象上的一组动作，可以直接连写而不需要重复获取对象。
8.隐式迭代。
9.行为层与结构层分离。开发者可以使用Jquery选择器选中元素，然后直接给元素添加事件。
10.丰富的插件支持
11.完善的文档。
12.开源
13.出色的浏览器兼容性。
二.JQuery类库类型
1.jquery.js开发版。完整无压缩版本，主要用于学习、测试和开发
2.jquery.min.js生产版，经过压缩，主要用于产品和项目。
三.Jquery的第一个demo
1.代码实现：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>jquery第一个练手程序</title>        <!--            作者：danishlyy@163.com            时间：2017-02-17            描述：引入jquery库文件        -->        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>    </head>    <body>        <script type="text/javascript">            $(document).ready(function(){                alert("hell wonders!");            });        </script>    </body></html>

其中:$(document).ready(function(){ // });与javascript中的window.onload方法很类似但是也有一些区别。
2.$(document).ready(function(){ // });与window.onload的区别：
（1）window.onload必须等待网页中的所有事物加载完包括图片，才可以执行；$(document).ready();只需要网页中的所有DOM结构绘制完毕就执行，可能与DOM有关联的一些并没有被执行。
（2）window.onload不可以同时编写多个；$(document).ready();可以同时编写多个。
（3）window.onload无简化写法；但是$(document).ready();可以简化为$(function(){ // });
四.Jquery代码风格
1.对于同一个对象不超过三个的可以写同一行
2.对于同一个对象有较多操作的，建议每行写一个操作。
3.对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。
4.为代码添加注释
五.jquery和DOM对象
1.DOM对象（document object model，文档对象模型）：每一个DOM都可以看做一个DOM树。
2.Jquery对象：就是通过Jquery把DOM对象包装后所产生的对象。jquery对象是jquery独有的，如果一个对象是jquery对象，那么就可以使用jquery对象的方法。在jquery对象中无法使用DOM对象的任何方法。同样DOM对象也不可以使用jquery里面的方法。
3.jquery和DOM对象之间相互转换
（1）Jquery对象转为DOM对象
方法1：jquery对象是一个类似于数组的对象，可以通过[index]的方式得到相应的DOM对象。

var $str = $("#id");//jquery对象   var str = $str[0];//DOM对象

方法2：jquery本身提供的，可以通过get(index)方法得到相应的DOM对象。

var $str = $("#id");//jquery对象   var str = $str.get(0);//DOM对象

（2）DOM对象转为JQuery对象
方法：用$(DOM对象)

var str = document.getElementById("#id");//DOM对象var $str = $(str);//jquery对象<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>    </head>    <body>        <input type="checkbox"  id="xb"/>性别        <script type="text/javascript">            var $xb = $("#xb");//jquery对象            var xb = $xb.get(0);//DOM对象            $xb.click(function(){                /*DOM方式判断是否选中*/                if(xb.checked){                    alert("xb is checked");                }            })        </script>    </body></html><!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>    </head>    <body>        <input type="checkbox"  id="xb"/>性别        <script type="text/javascript">            var $xb = $("#xb");//jquery对象            $xb.click(function(){                /*Jquery方式判断是否选中*/                if($xb.is(":checked")){                    alert("xb is checked");                }            })        </script>    </body></html>

五.jquery选择器
1.Jquery选择器的优势
（1）简洁的写法
（2）支持CSS1和CSS2的全部，Css3的部分选择器，拥有一些自己独有的选择器
（3）完善的处理机制

/*判断jquery对象是否存在的方法：判断其长度是否为0*/            if ($(".btn").length > 0) {                alert($(".btn").length);            }else{                alert("this object doesnnot exist!");            }

2.Jquery选择器分为：基本选择器，层次选择器，过滤选择器，表单选择器。
3.基本选择器
（1）通过元素id,class和标签等来查找DOM元素。在网页中，每个Id名称值可以使用一次，class可以重复使用。
4.层次选择器
通过DOM元素之间的层次关系来获取特定元素
（1）$("div span")选取

里的所有span元素，返回集合元素
（2）$("div > span")选取

下元素名为的子元素，返回集合元素
（3）$(".one+div")选取class为one的元素的下一个

同辈元素，返回集合元素
（4）$("#two~div")选取id为two的元素后面的所有的

的同辈元素
5.过滤选择器
过滤选择器主要是用于通过特定的过滤规则来筛选出特定的DOM元素。
基本过滤选择器
（1）:first 选择第一个元素，返回单个元素
（2）:last 选择最后一个元素，返回单个元素
（3）:not(selector) 去除所有与给定的选择器匹配的元素，返回集合元素
（4）:even选取索引是偶数的所有元素，索引从0开始，返回集合元素
（5）:odd 选取索引是奇数的所有元素，索引从0开始，返回集合元素
（6）:eq(index) 选取索引等于index的元素（index从0开始），返回单个元素
（7）:gt(index) 选取索引大于index的元素（index从0开始），返回集合元素
（8）:lt(index) 选取索引小于index的元素（index从0开始），返回集合元素
（9）:header 选取所有标题元素，返回集合元素，返回集合元素
（10）:animated 选取当前正在执行动画的所有元素，返回集合元素
（11）:focus 选取当前获取焦点的元素。，返回集合元素
内容过滤选择器
（1）:contains(text) 选取含有文本内容为“text”的元素，返回集合元素
（2）:empty选取不包含子元素或者文本元素为空的元素，返回集合元素
（3）:has(selector) 选取含有选择器匹配的元素的元素，返回集合元素
（4）:parent 选取含有子元素或文本的元素，返回集合元素
可见性过滤选择器
（1）:hidden 选取所有不可见的元素，返回集合元素
（2）:visible 选取所有可见的元素。，返回集合元素
属性过滤选择器
属性过滤器的过滤规则是通过元素的属性来选择对应的元素
（1）[attribuet] 取拥有此属性的元素，返回集合元素
（2）[attribute=value]取属性值为value的元素，返回集合元素
（3）[attribute!=value] 取属性值不为value的元素，返回集合元素
（4）[attribute^=value] 取属性值以value开头的元素，返回集合元素
（5）[attribute*=value] 取属性值包含value的元素，返回集合元素
（6）[attribute$=value] 取属性值以value结尾的元素，返回集合元素
（7）[attribute|=value] 选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符”-“）的元素，返回集合元素
（8）[attribute|-=value] 选取属性用空格分隔的值中包含一个给定值的元素，返回集合元素
（9）[attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次缩小一次范围，返回集合元素。
子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他的选择器稍微复杂，只要将元素的父元素和子元素区分清楚，使用起来也是很简单的。
（1）:nth-child（index/even/odd/equation）:选取每个父元素下面的第index子元素或者奇偶元素（index从1开始算起），返回集合元素。
（2）:first-child选择每个父元素的第一个子元素，返回集合元素
（3）:last-child 选择每个父元素的最后一个子元素，返回集合元素
（4）:only-child 如果某个元素是它父元素中的唯一的子元素，那么将会匹配，如果父元素中含有其他元素，则不会被匹配。返回集合元素。
:nth-child()是常用的子元素过滤选择器，详细功能如下：
（1）:nth-child(even)选取每个父元素下的索引值是偶数的元素
（2）:nth-child(odd)选取每个父元素下的索引值是奇数的元素
（3）:nth-child(2)选取每个父元素下的索引值是2的元素
（4）:nth-child(3n)选取每个父元素下的索引值是3的倍数的元素（n从1开始）
（5）:nth-child(3n+1)选取每个父元素下的索引值是（3n+1）的元素（c从1开始）
表单对象属性过滤选择器
对所选择的表单元素进行过滤。
（1）:enabled选取所有可用元素，返回集合元素。
（2）:disabled选取所有不可用元素，返回集合元素。
（3）:checked 选取所有被选中的元素（单选框，复选框），返回集合元素。
（4）:selected选取所有被选中的选项元素（下拉列表），返回集合元素。
表单选择器
（1）:input 选取所有<input><textarea><select><button>元素，，返回集合元素
（2）:text 选取所有单行文本框，返回集合元素
（3）:password 选取所有密码框，返回集合元素
（4）:radio 选取所有单选框，返回集合元素
（5）:checkbox 选取所有单选框，返回集合元素
（6）:submit 选取所有提交按钮，返回集合元素
（7）:image 选取所有图像按钮，返回集合元素
（8）:reset 选取所有重置按钮，返回集合元素
（9）:button选取所有按钮，返回集合元素
（10）:file选取所有上传域，返回集合元素
（11）:hidden 选取所有不可见元素，返回集合元素。
6.选择器中的一些注意事项
（1）选择器中含有“.”,”#”,”[“或者”)”等特殊字符，需要使用转义字符，否则解析会报错。
（2）属性选择器的@符号，使用1.3.1以上的版本时，就不需要再属性前面加@符号。
（3）选择器中的空格也是需要注意的，多一个空格和少一个空格有时候的结果是截然不同的。
五.Jquery中的DOM
DOM，是document object model，文档对象模型，是一种与浏览器，平台，语言无关的接口，使用该接口可以轻松的访问页面所有的标准组件。
1.DOM的分类
（1）DOM Core
DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。用途并非仅限于处理网页，还可以用来处理任何一种用标记语言编写出来的文档，如XML
JavaScript中的getElementById()，getElementsByTagName()，getAttribute()，setAttribute()等方法，都是DOM Core的组成部分。
比如：获取表单对象：document.getElementsByTagName("form")
获取某元素的src属性：element.getAttribute("src")
（2）HTML-DOM
在使用javascript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，提供了一些简明的记号来描述各种HTML元素的属性。但是它只能用来处理Web文档。
比如：获取表单对象方法:document.forms;
获取某元素的src属性：element.src;
（3）CSS-DOM
是一种针对CSS的操作，在Javascript中，CSS-DOM技术主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使得网页呈现各种不同的效果。

0 0