脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery的概述总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
jQuery的概述总结
一.jquery概念
jQuery是一个开源的轻量级JavaScript库
jQuery的理念是：wrITe less,do more(以最少的代码，敢最多的事)
jQuery的思想：通过选择器查找对应的jQuery节点对象，通过调用jquery对象属性或方法
来实现对节点的操作
jQuery优势：
出色的浏览器兼容性
强大的选择器
出色的DOM操作封装
完善的Ajax支持
链式操作方式
隐式迭代
丰富的插件支持
二.jQuery环境配置
获取jQuery文件
进入jQuery的官方网站https://jquery.COM/，下载最新的jQuery库文件
jquery.js(开发版)完整无压缩版本，主要用于测试、学习和开发
jquery.min.js(生产版)经过压缩的版本，主要应用于产品和项目
jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化
在页面中引入jQuery文件
三.jQuery的写法
1.$符号是jQuery的一个简写形式
$()就是jQuery中的函数，它的功能是获得()中指定的标签元素
$()方法等价于jQuery()方法
2.JS与jQuery的区别
//DOM结构加载完成后立即执行,可重复使用多次
$(document).ready(function() {
$("#p1").htML("Hello world!");
});
//页面内容完全加载完成后才会执行,只能使用一次
window.onload=function(){
document.getElementById("p1").innerHTML="hello world";
}
四.jQuery对象与DOM对象
jQuery对象是通过jQuery方法包装后的对象,可以使用jQuery中的属性和方法
DOM对象是DOM节点对象,可以使用DOM下的属性和方法
jQuery对象和DOM对象的属性和方法不可以混合使用
jQuery对象和DOM对象可以相互转换
1.jQuery对象转为DOM对象
jQuery对象是一个类似数组，可以通过[index]的方法得到相应的DOM对象
另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象
VAR p1=$('#p1') //jQuery对象
var p2=$('p')[0] //DOM对象
var P3=$('p').get(0) //DOM对象
2.DOM对象转为jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了
jQuery对象=$(DOM对象)
var p1=document.getElementById('p1') //DOM对象
var p2=$(p1) //jQuery对象
3.jQuery选择器
格式:
$("选择器内容")
类型:
基本选择器
层级选择器
匹配选择器
4.jQuery基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素
ID选择器: $(“#id值”)
类选择器: $(“.类名”)
标签选择器: $(“标签名”)
全选择器: $(“*”)
并集选择器: $(“selector1，selector2，selector3，……”)
在用JQ设置CSS样式的时候要把标签中的'-'去掉然后写成小驼峰的格式
5.jQuery层级选择器
通过DOM元素之间的层次关系来获取特定元素
后代选择器: $(“selector1 selector2”)
子选择器: $(“selector1>selector2”)
相邻(下一个)兄弟选择器: $(“selector1+selector2”)
所有(下面)兄弟选择器： $(“selector1~selector2”)
6.jQuery基本匹配选择器
:First 获取匹配的第一个元素
:last 获取匹配的最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
例：
$("tr:even")
$("input:not(:checked)")
$(":header").css("background", "#EEE");
7.jQuery属性匹配选择器
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
例：
$("input[id][name$='man']")
8.jQuery子元素匹配选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
例：
$("ul li:nth-child(2)") 从1开始
$("ul li:nth-child(even)")
$("ul li:nth-child(odd)")
$("ul li:nth-child(2n+1)")
9.jQuery表单匹配选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素，或者tyPE为hidden的元素
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected 匹配所有选中的option元素
例：
$(":file")
$("input:checked")
$("select option:selected")
10.jQuery内容匹配选择器
:contains(text) 匹配包含给定文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
例：
$("p:contains('John')")
$("p:has(p)")
$("p:parent")
11.jQuery可见性匹配选择器
hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
例：
$("p:hidden")
$("input:hidden")
$("p:visible")
12.jQuery对象过滤
eq(index|-index) 获取指定位置元素,这个元素的位置是从0算起。
first() @R_223_777@
last() 获取最后一个元素
hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true。
has(exPR|ele) 获取包含特定后代的元素
not(expr|ele)获取与指定表达式不匹配的元素
slice(start,[end]) 获取一个匹配的子集
start: 开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
end: 结束选取自己的位置，如果不指定，则就是本身的结尾
例：
$("p").eq(-2)
$('li').has('span')
$("p").slice(0, 2)
13.jQuery对象查找
children([expr]) 取得所有子元素的元素集合
next([expr]) 取得紧邻的下一个的同辈元素
nextAll([expr]) 查找当前元素之后所有的同辈元素
prev([expr]) 取得紧邻的上一个同辈元素
prevAll([expr]) 查找当前元素之前所有的同辈元素
siblings([expr]) 取得所有同辈元素的元素集合
parent([expr]) 取得父元素
parents([expr]) 取得祖先元素的元素集合(不包含根元素)
例：
$("p").next()
$("p:last").prevAll()
$("span").parents("p")
14.jQuery数组对象遍历
ecach()
jQuery数组对象.each(function(i){
})
例：
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery的概述总结全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery的概述总结所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。