jQuery常用操作 | 易学教程

jQuery

　　jQuery是一个轻量级的JS库，是一个被封装好的JS文件，提供了更为简便的元素操作方式，jQuery封装了DOM。

使用jQuery

引入jQuery文件

　　注意：引入必须放在其他jQuery操作之前。

jQuery对象

　　jQuery对象是由jQuery对页面元素进行封装后的一种体现

　　jQuery中所提供的所有操作都只针对jQuery对象，其他对象（DOM）无法使用

工厂函数 -- $()

　　想要获取jQuery对象，则必须使用工厂函数$()

　　在$()中允许传递一个选择器/DOM对象作为参数，$()能够将选择器和DOM对象全部封装成jQuery对象再进行返回

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery演示</title>
</head>
<body>
    <div id="main">
        id是mian的div元素
    </div>
<button onclick="bClick()">获取元素</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bClick() {
            //通过jquery选择器获取id='main'的元素
            var m = $("#main");
            //设置元素的内容
            m.html('动态设置的值');
            console.log(m)
        }
    </script>
</body>
</html>

DOM对象和jQuery对象之间的转换

　　DOM对象不能使用jQuery提供的操作，反之同样。

　　1、将DOM对象转换为jQuery对象

　　　　语法：var 变量 = $(DOM对象)；

　　　　注意:所有的jQuery对象在起名的时候，最好在变量前加$，主要用于和DOM对象的区分

　　　　例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        这是div元素
    </div>
    <button onclick="bClick()">DOM - jQuery</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bClick() {
            // 通过DOM的操作，得到id为main的元素
            var main = document.getElementById('main');
            // 再将其转换为jQuery对象
            var $main = $(main);
            $main.html('转换为JQ对象成功！')
        }
    </script>
</body>
</html>

　　2、将jquery对象转换为DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        这是div元素
    </div>
    <button onclick="JQtoDom()">jQuery-DOM</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function JQtoDom() {
            // 使用jquery得到id为main的元素
            var $main = $("#main");
            // 再将其转换为DOM对象
            // var m = $main[0];
            var m = $main.get(0);
            m.innerHTML = '转换为DOM对象成功！'
        }
    </script>
</body>
</html>

jQuery选择器

作用

　　获取页面上的元素们，返回值都是由jQuery对象所组成的数组

　　语法：$("选择器")

基本选择器

1、ID选择器

　　$("#id");

　　返回：返回页面中指定ID值的元素

2、类选择器

　　$(".className")

　　返回：页面中指定className的所有元素

3、元素选择器

　　$("element")

　　返回：页面中指定标记的所有元素

4、群组选择器 / 复合选择器

　　$("selector1,selector2,...")

　　返回：返回满足函数内所有选择器的函数们

层级选择器

1、$("selector1 selector2")

　　后代选择器

2、$("selector1>selector2")

　　子代选择器
3、$("selector1+selector2")

　　名称：相邻兄弟选择器

　　作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素

　　例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        <p id="p1">这是id为p1的元素</p>
        <p>这是普通元素</p>
        <p>这是普通元素</p>
        <p>这是普通元素</p>
        <p>这是普通元素</p>
    </div>
    <button onclick="bNB()">相邻兄弟选择器</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bNB() {
            $("#p1+p").css('background', 'yellow');
        }
    </script>

</body>
</html>

4、$("selector1~selector2")

　　名称：通用兄弟选择器

　　作用：匹配selector1后面所有满足selector2选择器的元素

　　例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        <p id="p1">这是id为p1的元素</p>
        <p>这是普通元素</p>
        <p>这是普通元素</p>
        <p>这是普通元素</p>
        <p>这是普通元素</p>
    </div>
    <button onclick="bNB()">通用兄弟选择器</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bNB() {
            $("#p1~p").css('color', 'red');
        }
    </script>
</body>
</html>

基本过滤选择器

　　过滤选择器通常都会配合着其他的选择器一起使用

1、:first

　　只匹配一组元素中的第一个元素

　　$("p:first")

2、:last

　　只匹配一组元素中的最后一个元素

3、:not("selector")

　　在一组元素中，将满足selector选择器的元素排除出去

4、:odd

　　匹配偶数行元素(奇数下标)

5、:even

　　匹配奇数行元素(偶数下标)

6、:eq(index) -- equals

　　匹配下标等于 index 的元素

7、:gt(index)

　　匹配下标大于 index 的元素

8、:lt(index)

　　匹配下标小于 index 的元素

属性过滤选择器

　　依托于html元素的属性来进行元素过滤的
1、[attribute]

　　作用：匹配包含指定属性的元素

　　ex:

　　div[id]:匹配具备id属性的div元素

2、[attribute=value]

　　作用：匹配attribute属性值为value的元素

　　ex:

　　　　input[type=text]

　　　　input[type=password]

3、[attribute!=value]

　　作用：匹配attribute属性值不是value的元素

4、[attribute^=value]

　　作用：匹配attribute属性值是以value字符开头的元素

　　ex:

　　　　p[class^=col]

5、[attribute$=value]
　　作用：匹配attribute属性值是以value字符结尾的元素

6、[attribute*=value]

　　作用：匹配attribute属性值中包含value字符的元素

子元素过滤选择器

1、:first-child

　　匹配属于其父元素中的首个子元素

2、:last-child

　　匹配属于其父元素中的最后一个子元素

3、:nth-child(n)

　　匹配属于其父元素中第n个子元素

4、jQuery操作DOM

　　基本操作
　　1、html()
　　　　作用：获取或设置 jQuery对象中的html内容
　　　　ex:
　　　　　　console.log($("#main").html());
　　　　　　$("#main").html("");

　　2、text()

　　　　作用：获取或设置 jQuery对象中的text内容

　　3、val()

　　　　作用：获取或设置 jQuery对象中的value值(表单控件)

　　4、属性操作

　　　　attr()

　　　　作用：读取或设置jQuery对象的属性值

　　　　ex:

　　　　　　$obj.attr("id");

　　　　　　获取 $obj 的id属性值

　　　　　　$obj.attr("id","main");

　　　　　　设置$obj对象的id属性值为main

　　　　removeAttr("attrName")

　　　　　删除jQuery对象的attrName属性

　　　　　ex:

　　　　　　$obj.removeAttr("class");

2、样式操作

　　1、attr()

　　　　$obj.attr("class","redBack");

　　2、addClass("className")

　　　　作用：将className 添加到元素的class值之后

　　　　ex:

　　　　　　$obj = $obj.addClass("c1");

　　　　　　$obj = $obj.addClass("c2");

　　　　　　连缀调用：

　　　　　　　　$obj.addClass("c1").addClass("c2");

　　3、removeClass("className")

　　　　如果无参的话，则清空类选择器

　　　　如果有参数的话，则删除对应的类选择器

　　　　ex:

　　　　　　$obj.removeClass("c1")

　　　　　　将c1类选择器从$obj移除出去

　　　　　　$obj.removeClass()

　　　　　　清空$obj的所有类选择器

　　4、toggleClass("className")

　　切换样式：

　　　　元素如果具备className选择器，则删除

　　　　元素如果没有className选择器，则添加

　　5、css("属性名")

　　　　$obj.css("width");

　　　　获取$obj对象的width属性值

　　6、css("属性名","属性值")

　　　　$obj.css("background-color","yellow");

　　　　设置$obj对象的background-color的属性值为yellow

　　7、css(JSON对象)

　　　　JSON对象：

　　　　是一种约束了格式的对象表现形式

　　　　JSON:JavaScript Object Notation

　　　　JSON对象的表示方式：

　　　　　　1、JSON对象必须使用{}括起来

　　　　　　2、使用键值对的方式来声明数据(表示属性和值)

　　　　　　3、所有的属性在使用时必须使用""括起来，值如果是字符串的话，也必须使用""括起来

　　　　　　4、属性和值之间使用:连接

　　　　　　5、多对属性和值之间使用 , 隔开

　　　　　　ex:

　　　　　　$obj.css({

　　　　　　　　"color":"red",

　　　　　　　　"font-size":"32px",

　　　　　　　　"float":"left"

　　　　　　　　});

遍历节点

1、children() / children("selector")

　　获取某jQuery对象的所有子元素或带有指定选择器的子元素

　　注意：只考虑子代元素，不考虑后代元素

2、next() / next("selector")

　　获取某jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素

3、prev() / prev("selector")

　　获取某jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素

4、siblings() / siblings(selector)

　　获取某jQuery对象的所有兄弟元素 / 满足selector的所有兄弟元素

5、find("selector")

　　查找满足selector选择器的所有后代元素

6、parent()

　　查找某jQuery对象的父元素

创建对象　　

语法：$("创建的标记")

ex:
　　1、创建一对div

　　　　var $div = $("<div></div>");

　　　　$div.html("动态创建的div");

　　　　$div.attr("id","container")

　　　　$div.css("color","red");

　　2、创建一对div

　　　　var $div = $("<div id='container' style='color:red;'>动态创建的div</div>");

插入元素

　　作用：将创建好的元素插入到网页中
　　1、内部插入
　　　　作为元素的子元素插入到网页中
　　　　$obj.append($new);
　　　　将$new元素插入到$obj元素中的最后一个子元素位置处(追加)
　　　　$obj.prepend($new);
　　　　将$new元素插入到$obj元素中的第一个子元素位置处
　　2、外部插入
　　　　作为元素的兄弟元素插入到网页中
　　　　$obj.after($new);
　　　　将$new元素作为$obj的下一个兄弟元素插入进来
　　　　$obj.before($new);
　　　　将$new元素作为$obj的上一个兄弟元素插入进来

删除元素

$obj.remove();
　　将$obj元素删除出去

jQuery中的事件处理

1、页面加载后的执行

　　类似于window.onload 但不同于 window.onload

　　jQuery加载后执行的特点：

　　在DOM树加载完毕的时候就开始执行

　　　　$(document).ready( function(){

　　　　//页面的初始化操作

　　　　//DOM树加载完成后就开始运行

　　　　} );

　　　　$().ready( function(){

　　　　//页面的初始化操作

　　　　//DOM树加载完成后就开始运行

　　　　} );

　　　　$( function(){

　　　　//页面的初始化操作

　　　　//DOM树加载完成后就开始运行

　　　　} );

2、jQuery的事件绑定

方式1

$obj.bind("事件名称",事件处理函数);

ex:

　　$obj.bind("click",function(){

　　//事件的行为操作

　　console.log("... ....");

　　});

方式2

　　$obj.事件名称(function(){

　　//事件处理函数
　　});

　　ex:
　　　　$obj.click(function(){
　　　　//通过 this 来表示触发该事件的DOM对象
　　　　});

3、事件对象 - event

在绑定事件的时候，允许传递 event 参数来表示事件对象

　　$obj.bind("click",function(event){
　　//event表示当前事件的事件对象
　　});

　　$obj.click(function(event){
　　//event表示当前事件的事件对象
　　});

　　event的使用方式与原生JS事件中的event使用方式一致。
　　event.stopPropagation() : 阻止事件冒泡
　　event.offsetX:
　　event.offsetY:
　　event.target:获取事件源