zoukankan html css js c++ java

jQuery

一、jQuery简介

1. 介绍

jQuery是JS的工具库，对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善,更便捷的方法。

2. 使用

1）引入

先引入jquery文件，才能使用jquery语法

2）工厂函数 -

例 :

//$()获取元素节点,需传入字符串的选择器

$("h1")

$("#d1")

$(".c1")

$("body,h1,p")

3）原生JS对象与jQuery对象

原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
1. 原生JS转换jQuery对象

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入jquery文件-->
    <script src="jquery-1.11.3.js"></script>
    <script>
        window.onload = function (){
            //使用jquery获取元素节点
            //$("选择器")
            console.log($("h1"));
            $("h1").html("haha");
            console.log($("h1")[0]);//获取原生JS对象
            //原生对象调用原生的方法
            $("h1")[0].innerHTML = "hehe";
            //eq(index)返回指定下标对应的jq对象
            console.log($("h1").eq(1));
            $("h1").eq(1).html("jq对象调用jq方法");
            console.log(test);
            //原生对象转换jquery对象,$(原生)封装
            $(test).html("包装成jquery对象");
        };
    </script>
</head>
<body>
    <h1>jquery</h1>
    <h1>jquery</h1>
    <h1 id="test">jquery</h1>
    <h1>jquery</h1>
    <h1>jquery</h1>
</body>
</html>

View Code

4）jQuery获取元素

jQuery通过选择器获取元素，$("选择器")

选择器分类 :

1. 基础选择器

`$("div")

ID 选择器：$("#d1")`

类选择器：$(".c1")

群组选择器：$("body,p,h1")

层级选择器

后代选择器： $("div .c1")

子代选择器： $("div>span")

相邻兄弟选择器： $("h1+p") 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2

通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入jquery文件-->
    <script src="jquery-1.11.3.js"></script>
    <script>
        window.onload = function (){
            //1.标签选择器
            console.log($("h1").html());
            //2.id选择器
            //css()操作行内样式
            $("#d1").css("color","red");
            //3.class选择器
            $(".c1").css("color","pink");
            //4.群组选择器
            $("body,h1").css("margin","0");
            //5.后代选择器
            $("#box span").css("color","red");
            //6.子代选择器
            $("#box>span").css("background","green");
            //7.相邻兄弟选择器
            $("#box p+span").css("border","1px solid black");
            //8.通用兄弟选择器
            $("#box p~span").css("font-size","32px");
        };
    </script>
</head>
<body>
    <h1 id="d1" class="c1">大旭</h1>
    <h1 class="c1">超哥哥</h1>
    <div id="box">
        <span>div->span</span>
        <p>
            <span>div->p->span</span>
        </p>
        <b>测试</b>
        <span>div->span</span>
        <span>div->span</span>
    </div>

</body>
</html>

View Code

过滤选择器

需要结合其他选择器使用。

:first

匹配第一个元素例:$("p:first")

:last

匹配最后一个元素例:$("p:last")

:odd

匹配奇数下标对应的元素

:even

匹配偶数下标对应的元素

:eq(index)

匹配指定下标的元素

:lt(index)

匹配下标小于index的元素

:gt(index)

匹配下标大于index的元素

:not(选择器)

否定筛选,除()中选择器外,其他元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入jquery文件-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <h1 id="d1">过滤选择器</h1>
    <h1>过滤选择器</h1>
    <h1>过滤选择器</h1>
    <h1 class="c1">过滤选择器</h1>
    <h1>过滤选择器</h1>
    <h1 class="c1">过滤选择器</h1>
    <h1>过滤选择器</h1>
    <h1>过滤选择器</h1>
    <button id="btn1">:first</button>
    <button id="btn2">:last</button>
    <button id="btn3">:odd</button>
    <button id="btn4">:even</button>
    <button id="btn5">:eq()</button>
    <button id="btn6">:lt()</button>
    <button id="btn7">:gt()</button>
    <button id="btn8">:not()</button>
    <script>
        btn8.onclick = function (){
            //匹配下标不为3的所有h1
            //$("h1:not(:eq(3))").css("color","#999");
            $("h1:not(#d1,.c1)").css("color","#ff0");
        };
        btn5.onclick = function (){
            $("h1:eq(3)").css("color","#fa3377");;
        };
        btn6.onclick = function (){
            $("h1:lt(3)").css("color","#33fa77");;
        };
        btn7.onclick = function (){
            $("h1:gt(3)").css("color","#3377fa");
        };

        btn3.onclick = function (){
            $("h1:odd").css("color","blue");;
        };
        btn4.onclick = function (){
            $("h1:even").css("color","orange");;
        };
        btn1.onclick = function (){
            $("h1:first").css("color","red");
        };
        btn2.onclick = function (){
            $("h1:last").css("color","green");
        };

    </script>
</body>
</html>

View Code

属性选择器

属性选择器以[ ]为标志.

1. [attrName]

匹配包含指定属性的元素

2. [attrName=value]/[attrName="value"]

匹配属性名=属性值的元素

3. [attrName^=value]

匹配属性值以指定字符开头的元素

4. [attrName$=value]

匹配属性值以指定字符结尾的元素

5. [attrName*=value]

匹配属性值包含指定字符的元素

子元素过滤选择器

:first-child

匹配第一个子元素

:last-child

匹配最后一个子元素

:nth-child(n)

匹配第n个子元素(n从1开始计数)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入jquery文件-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <h1>小泽</h1>
    <h1 id="d1">大旭</h1>
    <h1 id="d2">超哥哥</h1>
    <h1 id="cd">老祁</h1>
    <h1 id="adi">铭铭</h1>
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <a href=""></a>
    </ul>
    <script>
        console.log($("[id]"));
        console.log($("[id='d1']"));
        //匹配id属性值以"d"开头的元素
        console.log($("[id ^= d]"));
        //以"d"结尾
        console.log($("[id $= d]"));
        //id属性值包含"d"
        console.log($("[id *= d]"));
        
        //子元素过滤选择器
        $("li:first").css("color","red");
        $("li:first-child").css("background","green");
        $("li:last-child").css("background","orange");
        $("li:nth-child(2)").css("text-align","center");        

    </script>
</body>
</html>

View Code

5）操作元素内容

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法

text() //设置或读取标签内容,等价于innerText,不能识别标签

val() //设置或读取表单元素的值,等价于原生value属性

6）操作标签属性

attr("attrName","value")
设置或读取标签属性: $("h1").attr("id","d1").attr("class","c1").attr("class","c1 c2");

prop("attrName","value")

设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写

removeAttr("attrName")

移除指定属性: $("div").addClass("c1").addClass("c2").removeClass("c1");

7）操作标签样式

为元素添加id/class属性,对应选择器样式,针对类选择器,提供操作class属性值的方法

addClass("className") //添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

//1.操作id/class属性对应选择器样式
$("h1").attr("id","d1").attr("class","c1")
.attr("class","c1 c2");

//2.直接操作class属性值
$("div").addClass("c1").addClass("c2")
.removeClass("c1");

//toggleClass()借助用户行为切换类名,有则删除,无则添加
btn.onclick = function (){
$("div").toggleClass("c1 c2");
};

操作行内样式

css("属性名","属性值") //设置行内样式

//行内样式
$("div").css("width","200px");

//css(JSON对象)设置一组CSS样式,括号内部以花括号为对象；
$("div").css({

"height":"200px",
"border":"1px solid blue"
});

$("div").css("height","300px");

JSON对象:常用数据传输格式

语法 :

{

"width":"200px",

"height":"200px",

"color":"red"

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        #d1{
            color:red;
        }
        .c1{
            background:green;
        }
        .c2{
            text-align:center;
        }
    </style>
    <script>
        window.onload = function (){
            //1.操作id/class属性对应选择器样式
            $("h1").attr("id","d1").attr("class","c1")
            .attr("class","c1 c2");
            //2.直接操作class属性值
            $("div").addClass("c1").addClass("c2")
            .removeClass("c1");
            //toggleClass()借助用户行为切换类名,有则删除,无则添加
            btn.onclick = function (){
                $("div").toggleClass("c1 c2");
            };
            //3.操作行内样式
            $("div").css("width","200px");
            $("div").css({
                "height":"200px",
                "border":"1px solid blue"
            });
            $("div").css("height","300px");
        };
    </script>
</head>
<body>
    <h1>样式设置</h1>
    <div>直接修改类名</div>
    <button id="btn">切换</button>
</body>
</html>

View Code

8）根据层级结构获取元素

parent()返回父元素

parents('selector') 返回满足选择器的祖先元素

children()/children("selector") 返回所有直接子元素/返回满足选择器的直接子元素

find("selector") 返回所有的后代元素(包含直接与间接)

next()/next("selector")返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器

prev()/prev("selector") 返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器

siblings()/siblings("selector") 返回所有的兄弟元素/满足选择器的所有兄弟元素

html代码：

查找代码：

        //获取父元素
        console.log($("p").parent());
        //获取祖先元素和id为box的祖先元素
        console.log($("p").parents(),$("p").parents("#box"));
        //获取直接子元素数组
        console.log($("div").children(),$("div").children("p"));
        //获取满足选择器的所有后代元素
        console.log($("div").find("span"));
        //获取前后相邻兄弟元素
        console.log($("p").prev(),$("p").next());
        console.log($("p").prev("b"),$("p").next("b"));
        //获取所有兄弟元素
        console.log($("p").siblings(),$("p").siblings("b"));

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <div id="box">
        <b>加粗</b>
        <span>参考</span>
        <p>
            <span>p->span</span>
        </p>
        <span>参考</span>
        <b>加粗</b>
    </div>
    <script>
        //获取父元素
        console.log($("p").parent());
        //获取祖先元素
        console.log($("p").parents(),$("p").parents("#box"));
        //获取直接子元素数组
        console.log($("div").children(),$("div").children("p"));
        //获取满足选择器的所有后代元素
        console.log($("div").find("span"));
        //获取前后相邻兄弟元素
        console.log($("p").prev(),$("p").next());
        console.log($("p").prev("b"),$("p").next("b"));
        //获取所有兄弟元素
        console.log($("p").siblings(),$("p").siblings("b"));

        //元素的创建
        var h1 = $("<h1 id='d2'>动态创建</h1>");
        var h2 = $("<h2></h2>");
        h2.html("二级标题");
        console.log(h1,h2);
        //添加节点
        //作为子元素添加到父元素的头尾位置
        $("#box").append(h1);//末尾
        $("#box").prepend(h2);//开头
        //作为兄弟元素添加
        $("#box").after(h1).before(h2);
        /*
        创建h3,h4元素节点,文本内容不限,作为div的头尾子元素添加至
        页面显示,再创建两个超链接标签,分别显示在h3之后,h4之前
        */
        var h3 = $("<h3>三级标题</h3>");
        var h4 = $("<h4>四级标题</h4>");
        $("#box").append(h3).prepend(h4);
        var a1 = $("<a href>超链接1</a>");
        var a2 = $("<a href>超链接2</a>");
        h3.after(a1);
        h4.before(a2);

        //移除元素
        h3.remove();
    </script>
</body>
</html>

View Code

9）元素的创建,添加,删除

创建:使用$("标签语法")，返回创建好的元素

/元素的创建
        var h1 = $("<h1 id='d2'>动态创建</h1>");
        var h2 = $("<h2></h2>");
        h2.html("二级标题");
        console.log(h1,h2);

添加至页面
1）作为子元素添加

$obj.append(newObj); //在$obj的末尾添加子元素newObj

$obj.prepend(newObj); //作为第一个子元素添加至$obj中

//添加节点
//作为子元素添加到id为box的父元素的头尾位置
$("#box").append(h1);//末尾
$("#box").prepend(h2);//开头

2）作为兄弟元素添加

$obj.after(newObj); //在$obj的后面添加兄弟元素

$obj.before(newObj); //在$obj的前面添加兄弟元素

代码：

//作为兄弟元素添加
$("#box").after(h1).before(h2);
/*
创建h3,h4元素节点,文本内容不限,作为div的头尾子元素添加至
页面显示,再创建两个超链接标签,分别显示在h3之后,h4之前
*/
var h3 = $("<h3>三级标题</h3>");
var h4 = $("<h4>四级标题</h4>");
$("#box").append(h3).prepend(h4);
var a1 = $("<a href>超链接1</a>");
var a2 = $("<a href>超链接2</a>");
h3.after(a1);
h4.before(a2);

3）移除元素想要删除谁，谁调方法

$obj.remove(); //移除$obj

h4.remove();

10）jQuery事件处理

文档加载完毕
原生JS 方法：window.onload

window.onload = function (){
            alert("1");
        };
        if(window.onload){ //正常使用原生,后面的window.onload覆盖前面，需要加if判断前后都会执行。
            var fn = window.onload;
            console.log(fn);
            fn();
        }
        window.onload = function (){
            alert("2");
        };

jQuery:

//语法一

$(document).ready(function (){

//文档加载完毕后执行

})

//语法二

$().ready(function (){

//文档加载完毕后执行

})

//语法三

$(function(){

//文档加载完毕后执行

})

区别：

原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行

2. 事件绑定方式
事件名称省略 on 前缀
```javascript
//on("事件名称"，function)
$("div").on("click",function(){});
//bind("事件名称",function)
$("div").bind("click",function(){});
//事件名作为方法名
$("div").click(function(){});
```

   $(function (){
            //alert("3");
            $("h1").on("click",function (){
                alert("h1被点击");
            })
            $("h2").bind("click",function (){
                alert("h2被点击");
            })
            $("h3").click(function (){
                //alert("h3被点击");
            }).mouseover(function (){
                console.log("mouseover");
            }).mouseout(function (){
                console.log("mouseout");
            }).css("background","green")

            //下拉菜单点击传值
            $("ol li").click(function (){
                //获取被点击元素的标签内容
                console.log(this.innerHTML,$(this).html());
                $("span").html($(this).html());
            });
        })

3. this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。

  //下拉菜单点击传值
            $("ol li").click(function (){
                //获取被点击元素的标签内容
                console.log(this.innerHTML,$(this).html());
                $("span").html($(this).html());
            });
        })

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.11.3.js"></script>
    <script>
    /*
        window.onload = function (){
            alert("1");
        };
        if(window.onload){
            var fn = window.onload;
            console.log(fn);
            fn();
        }
        window.onload = function (){
            alert("2");
        };
        */
        //jquery中使用ready()方法表示文档加载完毕
        $(document).ready(function (){
            //alert("1");
        })
        $().ready(function (){
            //alert("2");
        })
        $(function (){
            //alert("3");
            $("h1").on("click",function (){
                alert("h1被点击");
            })
            $("h2").bind("click",function (){
                alert("h2被点击");
            })
            $("h3").click(function (){
                //alert("h3被点击");
            }).mouseover(function (){
                console.log("mouseover");
            }).mouseout(function (){
                console.log("mouseout");
            }).css("background","green")

            //下拉菜单点击传值
            $("ol li").click(function (){
                //获取被点击元素的标签内容
                console.log(this.innerHTML,$(this).html());
                $("span").html($(this).html());
            });
        })

    </script>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <ul>
        <li>
            <span>北京</span>
            <ol>
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
            </ol>
        </li>
    </ul>
</body>
</html>

View Code

查看全文

相关阅读:
SQL SELECT DISTINCT 语句
 SQL SELECT 语句
 SQL 语法
 Linux 命令大全
 MySQL 安装
 Nginx 安装配置
 linux yum 命令
 Linux 磁盘管理
 Linux 文件与目录管理
 Linux 用户和用户组管理

原文地址：https://www.cnblogs.com/gyl10/p/11126353.html

热门文章
SQL IN 操作符
 SQL LIKE 操作符
 SQL 服务器
 SQL INSERT INTO 语句
 SQL 简介
 SQL UPDATE 语句
 SQL DELETE 语句
 SQL AND & OR 运算符
 SQL ORDER BY 子句
 SQL WHERE 子句

jQuery

1. 介绍

2. 使用

1）引入

2）工厂函数 - ()"函数用于获取元素节点，创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。

例 :

3）原生JS对象与jQuery对象

7）操作标签样式

2）工厂函数 -