jQuery
1. 什么是jQuery??
jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。
jQuery的核心理念是Write less，Do more。
使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。
2.jQuery的特点：
利用选择器来查要操作的节点，然后将这些节点封装成一个jQuery对象，通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。
好处：a、兼容性更好；b、代码更简洁
3.编程步骤：
step1、使用选择器查节点
step2、调用jQuery的属性和方法
4.jQuery对象与DOM对象之间的转换
1. 什么是jQuery对象？？
jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。
2. DOM对象 ----> jQuery对象
DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。
function f( ){
var obj = ElementById(‘d1’);
//DOM -> jQuery对象
var $obj = $(obj);
$obj.html(‘hello jQuery’);
}
3. jQuery对象 ----> DOM对象
jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$(0)。
function f( ){
var $obj = $(‘#d1’);
//jQuery对象 -> DOM
var obj = $(obj).get (0);
obj.innerHTML = ‘hello jQuery’;
}
5. jQuery选择器
1. 什么是jQuery选择器？？
jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery 定位到要操作的元素上，使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。
2. 选择器的种类
a、基本选择器
#id根据指定的ID匹配一个元素
.class根据指定的类匹配一个元素
element根据的指定的元素名匹配所有的元素
select1,select2,......将每一个选择器匹配到的元素合并后一起返回 *匹配所有元素
b、层级选择器
1. select1 空格 select2 查指定元素的所有的后代
2. select1 > select2 查子节点
3. select1 + select2 下一个兄弟
4. select1 ~ select2 下面所有的兄弟
c、过滤选择器
1. 基本过滤选择器
:first 获取第一元素
:last 获取最后一个元素
:not 排除选择器要求的元素
:even 匹配所有下标为偶数的元素
:odd 匹配所有下标为奇数的元素
:eq 匹配所有给定索引值的元素
:gt 匹配所有大于给定索引值的元素
:lt 匹配所有小于给定索引值的元素
ajax实例里面的函数
2. 内容过滤选择器
:contains 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has 匹配含有选择器所匹配的元素的元素
:parent匹配含有子元素或者文本的元素
3. 可见性过滤选择器
根据元素在页面中的可见属性进行过滤，主要是对hidden属性和visible 属性的判断。
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
4. 属性过滤选择器
属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
5. 子元素过滤选择器
子元素过滤选择器会根据子元素的位置的数值来进行筛选。
:nth-child （index、enven、odd）匹配其父元素下的第N个子或奇偶元素。注意':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
6. 表单对象属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select 中的option)
:selected 匹配所有选中的option元素
d、表单选择器
使用的规则和以上各选择器一致。$(“：input”)就会返回所有的input输入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图片
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有的文件域
:hidden 匹配所有不可见元素，或者type为hidden的元素
6.jQuery操作DOM-查询
1. html（） html()等价于innerHTML
读取或修改节点的HTML内容的属性和value值。与DOM对象的
innerHTML的作用一致。
2. text（） text()等价于innerText
读取或修改节点中的文本内容，会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同，在jQuery中则使用text（）方法即可。
3. val（）
读取或修改节点的value属性值，也就是针对表单元素中有value属性的哪些元素的操作。
4. attr（）
读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的任何属性。
7. jQuery操作DOM-创建、插入、删除
1. 创建DOM节点的语法
使用$符号将HTML标记的字符串文本括起来，即创建了DOM节点，如$（html）。大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可以实现节点的插入简写形式
如 $(‘body’).append(‘<div>…</div>”)
2. 插入DOM节点的方法
append方法会将DOM节点作为最后一个孩子节点添加进来
prepend方法将DOM节点作为第一个孩子节点添加进来
after方法将DOM节点作为下一个兄弟节点添加进来
before方法将DOM节点作为上一个兄弟节点添加进来

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。