jQuery的概述总结

Json_
88 阅读3分钟

一、jQuery概念

jQuery是一个开源的轻量级JavaScript库

jQuery的理念是：write less,do more(以最少的代码，敢最多的事)

jQuery的思想：通过选择器查找对应的jQuery节点对象，通过调用jQuery对象属性或方法

来实现对节点的操作

jQuery优势：

出色的浏览器兼容性

强大的选择器

出色的DOM操作封装

完善的Ajax支持

链式操作方式

隐式迭代

丰富的插件支持

二.jQuery环境配置

获取jQuery文件

进入jQuery的官方网站jquery.com/，下载最新的jQuer…

jquery.js（开发版）完整无压缩版本，主要用于测试、学习和开发

jquery.min.js（生产版）经过压缩的版本，主要应用于产品和项目

jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化

在页面中引入jQuery文件

<script src=“jquery.js” type=“text/javascript”></script>

三、jQuery的写法

  1. $符号是jQuery的一个简写形式

$()就是jQuery中的函数，它的功能是获得（）中指定的标签元素

$()方法等价于jQuery()方法

  1. JS与jQuery的区别

//DOM结构加载完成后立即执行,可重复使用多次

$(document).ready(function() {
\$("#div1").html("Hello world!");
});

//页面内容完全加载完成后才会执行,只能使用一次

window.οnlοad=function(){
document.getElementById("div1").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 div1=$('#div1')                          //jQuery对象
var div2=$('div')\[0]                         //DOM对象
var div3=\$('div').get(0)                 //DOM对象
  1. DOM对象转为jQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了

jQuery对象=$(DOM对象)

var div1=document.getElementById('div1')    //DOM对象
var div2=\$(div1)                            //jQuery对象
  1. jQuery选择器

格式:

$("选择器内容")

类型:

基本选择器

层级选择器

匹配选择器

  1. jQuery基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素

ID选择器: $(“#id值”)

类选择器: $(“.类名”)

标签选择器: $(“标签名”)

全选择器: $(“*”)

并集选择器: $(“selector1，selector2，selector3，……”)

在用JQ设置CSS样式的时候要把标签中的'-'去掉然后写成小驼峰的格式

  1. jQuery层级选择器

通过DOM元素之间的层次关系来获取特定元素

后代选择器: $(“selector1 selector2”)

子选择器: $(“selector1>selector2”)

相邻(下一个)兄弟选择器: $(“selector1+selector2”)

所有（下面）兄弟选择器： $(“selector1~selector2”)

  1. 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");
  1. jQuery属性匹配选择器

[attribute] 匹配包含给定属性的元素

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素 [attribute*=value] 匹配给定的属性是以包含某些值的元素 [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用 例：

$("input\[name\*='man']")
$("input[id][name$='man']")
  1. 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)")
  1. 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")
  1. jQuery内容匹配选择器

:contains(text) 匹配包含给定文本的元素

:has(selector) 匹配含有选择器所匹配的元素的元素

:empty 匹配所有不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素

例：

$("div:contains('John')")
$("div:has(p)")
\$("div:parent")
  1. jQuery可见性匹配选择器

hidden 匹配所有不可见元素，或者type为hidden的元素

:visible 匹配所有的可见元素

例：

$("div:hidden")
$("input:hidden")
\$("div:visible")

12.jQuery对象过滤

eq(index|-index) 获取指定位置元素,这个元素的位置是从0算起。

first() 获取第一个元素

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()
$("div:last").prevAll()
\$("span").parents("p")

14.jQuery数组对象遍历

ecach()

jQuery数组对象.each(function(i){

$(this).......

})

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JQuery数组遍历对象</title>
    <script src="jquery-1.8.2.js"></script>
    <script>
        $(function(){
            $('img').each(function(i){
                //this.src='imgs/img'+i+'.jpg'; //遍历出来的元素js的DOM对象
                $(this).attr('src','imgs/img'+i+'.jpg')//可以通过 $(this)将DOM对象转为jQuery对象
            })
        })
    </script>
</head>
<body>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
</body>
</html>
avatar
文章
阅读
粉丝