jQuery

一、概述

1. 介绍

官方网址：jquery官网跳转

中文API：jquery123.com

jQuery是一个JS的工具库，对原生的JS中的方法进行封装，可以实现更简单的操作

2. 使用

(1) 引入jQuery文件

(2) 核心对象：jQuery对象（使用$表示）

(3) 工厂函数

即$()函数

$()：用于获取元素，创建节点，原生对象转JQ对象等

例如：使用$("选择器")获取元素

window.onload = function (){
    // 此时使用的jQuery的$()，根据标签选择器获取元素
    console.log($("h1"));
    // 原生对象使用原生属性和方法；jQuery对象使用jQuery的属性和方法，不能混用
    $("h1").html("哈哈");

    // jquery 转 原生
    // 法一、从jquery对象中通过下标取元素，返回原生对象
    $("h1")[0].innerHTML = "jq-->原生";
    // 法二、jquery对象调用get(index),返回原生对象
    $("h1").get(1).innerHTML = "get()转原生";

    // 原生转jquery对象，使用$()封装
    var h1 = document.getElementsByTagName("h1")[0];
    $(h1);
};

3.获取元素

$("selector")根据选择器获取元素

选择器分类

3.1.1 基础选择器

标签、id、class、群组

例如：$("h1")、$("#box")、$(".c1")、$("body,h1")

window.onload = function (){
    $("h1").html("标签选择器"); // 标签选择器
    $("#d1").html("ID选择器"); // ID选择器
    $(".c1").html("类选择器"); // 类选择器

    // 内部提供修改css样式的方法 
    $("#d1").css("color","red");
    $(".c1").css("background","green");
    $("#d1,.c1").css("text-align","center").css("font-size","100px"); // 链式调用，可以添加多个css或者html
};

BaseSelector

3.1.2 层级选择器

(1) 后代选择器$("#box span")

(2) 子代选择器$("#box>span")

(3) 相邻兄弟选择器$("h1+p")

向后查找相邻的一个兄弟元素，同时必须满足指定的选择器，$("h1+p")表示获取h1后边的相邻兄弟p元素

(4) 通用兄弟选择器$("h1~p")

向后查找所有满足选择器的兄弟元素

3.1.3 过滤选择器

需要与基础选择器结合使用

(1) 匹配第一个

:first

(2) 匹配最后一个

:last

(3) 匹配偶数

匹配偶数下标对应的元素

:even

(4) 匹配奇数

匹配奇数下标对应的元素

:odd

(5) 匹配下标

匹配对应下标的元素

:eq(index)

(6) 匹配下标（大于）

匹配大于指定下标的元素

:gt(index)

(7) 匹配下标（小于）

匹配小于指定下标的元素

:lt(index)

(8) 否定筛选

:not(selector)

<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<button onclick="first()">:first</button>
<button onclick="last()">:last</button>
<button onclick="even()">:even</button>
<button onclick="odd()">:odd</button>
<button onclick="gt()">:gt</button>
<button onclick="eq()">:eq</button>
<button onclick="lt()">:lt</button>
<button onclick="not()">:not</button>

<script>
    function first(){
        $("p:first").css("background","red");
    };
    function last(){
        $("p:last").css("background","green");
    };
    function even(){
        $("p:even").html("偶数下标").css("text-algin","center");
    };
    function odd(){
        $("p:odd").html("奇数下标").css("text-algin","center");
    };
    function eq(){
        $("p:eq(5)").css("color","red");
    };
    function gt(){
        $("p:gt(5)").css("color","blue");
    };        
    function lt(){
        $("p:lt(5)").css("color","orange");
    };
    function not(){
        $("p:not(:eq(5))").css("color","black");
    };
</script>

过滤选择器

3.1.4 属性选择器

根据标签属性匹配元素

(1) 包含属性

匹配包含指定属性名的元素

[attrName]

(2) 指定属性

匹配属性名等于属性值的元素

[attrName=value]/[attrName="value"]

(3) 模糊匹配

[attrName^=value]匹配属性值以指定的value开头的元素

[attrName$=value]匹配属性值以指定的value结尾的元素

[attrName*=value]匹配属性值中包含value的元素

<h1 class="c1">标题</h1>
<h1>标题</h1>
<h1 class="dc1">标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<script>
    console.log($("[class]"));
    console.log($("[class=c1]"));
    console.log($("[class^=c]")); // 类名以c开头
    console.log($("[class$=1]")); // 类名以1结尾
    console.log($("[class*=c]")); // 类名包含c
</script>

3.1.5 子元素过滤选择器

:first-child匹配第一个子元素

:last-child匹配最后一个子元素

:nth-child匹配第n个子元素

<ul>
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<script>
    $("li:first").css("color","red"); // 匹配元素列表中第一个
    $("li:first-child").css("background","orange"); // 匹配元素列表中作为第一个子元素存在的li
    $("li:last").css("color","green");// 匹配元素列表中最后一个
    $("li:last-child").css("background","cyan"); // 匹配元素列表中作为最后一个子元素存在的li
    $("li:nth-child(3)").css("text-align","center"); // 匹配元素列表中第三个子元素li        
</script>

子元素过滤选择器

二、DOM操作

使用jquery操作DOM元素

1. 获取元素

$("选择器")获取元素：包括基础选择器、层级选择器和过滤选择器

2. 操作元素内容

2.1 `html()`

读取设置元素的内容，可以识别标签语法

给参数表示设置，不给参数表示读取。

修改的时候会遍历整个列表，修改每一个元素的内容

<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<script>
    $("h1").html("<a href='https://www.cnblogs.com/chancey/'>素心</a>");
    $("h1").eq(0).html("<a href='https://www.cnblogs.com/chancey/'>素心(动态修改)</a>");
    console.log($("h1").html()); // 只能取到第一个元素
</script>

2.2 `text()`

读取或者设置元素的内容，不能识别标签语法

2.3 `val()`

读取或设置表单控件的值

<style>
    div{
        width: 300px;
        height: 200px;
        background: palegreen;
        margin-top: 30px;
        text-align: center;
        line-height: 200px;
        color: blueviolet;
    }
</style>

<h3>欢迎进入测试系统</h3>
<input type="text" placeholder="请输入">
<button onclick="show()">提交</button>
<div></div>
<script>
    function show(){
        // console.log($("input").html());
        $("div").html('<h1>'+$("input").val()+'</h1>');
    };
</script>

3. 操作元素属性

3.1 设置属性

attr("attrName","value")读取或设置标签属性

prop("attrName","value")读取或设置标签属性

两者没有太大的区别，如果属性用于表示元素的状态（按钮的选中或取消选中），只能使用prop()设置

<!-- 只展示body中的内容 -->
<h1>标题</h1>
<p>段落</p>
<input type="checkbox" checked>
<!-- checked等同于checked = checked -->
<script>
    $("h1").attr("id","d1");
    $("p").attr("id","d2").prop("class","c1");
    console.log($("h1").attr("id"),$("p").prop("class")); //取属性值
    // 获取按钮的选中状态
    console.log("attr:"+$("input").attr("checked"));
    console.log("attr:"+$("input").prop("checked"));

3.2 删除属性

removeAttr("attrName")移除指定的属性

4. 操作元素样式

(1) 操作id/class属性，对应选择器样式

(2) 直接添加或修改类名，针对类选择器样式

addClass("class属性值") 增加属性

removeClass("class属性值") 删除属性

toggleClass("class属性值") 有则删除，无则添加（由事件触发，动态切换类名）

(3) 操作行内样式

css("attrName","value")传入CSS的属性名和属性值

css({JSON对象})传入JSON对象统一设置样式

JSON格式

{
    "color":"red",
    "text-agign":"center"
}

<style>
    #d1{
        color: red;
    }
    .c1{
        background: green;
    }
    .c2{
        text-align: center;
    }
</style>

<body>
    <h1>标题</h1>
    <p>动态操作类名</p>
    <div>行内样式</div>
    <button onclick="toggle()">点击切换</button>
    <script>
        // 1.操作id/class属性对应选择器样式
        $("h1").attr("id","d1").prop("class","c1").prop("class","c1 c2");
        // 2.动态操作类名
        $("h1").addClass("c1").addClass("c2");
        $("h1").removeClass("c1").removeAttr("id");
        // 事件触发
        function toggle(){
            $("h1").toggleClass("c1");
        };

        // 3.操作行内样式
        $("div").css({
            "width":"200px",
            "height":"200px",
            "background":"red"
        }).css("width","500px")
    </script>
</body>

5. 层次方法

根据层级结构取元素

5.1 父元素

parent()

获取唯一的父元素

5.2 祖先元素

parents("selector")

获取满足选择器的祖先元素

5.3 子元素

children()/children("selector")

获取子元素数组/满足选择器

5.4 子元素(所有)

find("selector")

获取所有满足条件的子元素

5.5 相邻元素

next()/next("selector")

获取下一个兄弟元素/获取下一个满足条件的兄弟元素

prev()/prev("selector")

获取上一个兄弟元素/获取上一个满足条件的兄弟元素

siblings()/siblings("selector")

<body>
    <div id="box">
        <div class="c1">
            <h1>标题</h1>
            <h2>标题</h2>
        </div>
        <h2>示例</h2>
        <p>段落</p>
    </div>
    <script>
        console.log($("h1").parent());
        console.log($("h1").parents()); // 如果省略参数，则会获取所有祖先元素
        console.log($("h1").parents("#box")); // 有参数则指定获取

        console.log($("#box").children()); // 获取直接子元素数组
        console.log($("#box").children("h2")); // 获取指定的子元素（只获取直接子元素）

        console.log($("#box").find("h2")); // 匹配所有满足条件的子元素
        
        console.log($(".c1").next()); // 获取下一个相邻元素
        console.log($(".c1").next("p")); // 获取下一个满足条件的相邻元素
        console.log($(".c1").prev("p")); // 获取上一个满足条件的相邻元素

        console.log($("p").siblings());
    </script>
</body>

6. 元素的编辑

6.1 创建

语法：$("标签语法")

例如：$("<h1>标题</h1>")

6.2 添加

(1) 作为子元素添加

$parent.append($obj)作为最后一个元素添加

$parent.prepend($obj)作为第一个子元素添加

(2)作为兄弟元素添加

$obj.before($new)新元素添加在$obj之前

$obj.after($obj)新元素添加在$obj之后

(3)移除

&obj.remove()移除$obj

<script>
    // 创建H1
    var h1 = $("<h1></h1>").html("标题1").attr("id","d1");
    // 创建h2
    var h2 = $("<h2 id='d2'>标题2</h2>");
    // 添加
    $("body").append(h1).prepend(h2);
    h2.before(h1);

    var p = $("<p>段落</p>");
    h2.after(p);

    // 移除
    h1.remove(); // 删除当前的h1元素
</script>

三、jQuery处理事件

1. 事件绑定

$(document).ready(function (){文档加载完毕后执行})

$().ready(function (){文档加载完毕后执行})

$(function (){文档加载完毕后执行})

与原生的onload事件的区别：

原生onload事件会造成覆盖问题，永远只执行最后一个onload，需要手动检测；

ready()内部实现了检测，不会产生覆盖问题，按照代码书写顺序，一次执行

(1) 等待文档加载完毕

(2) 事件绑定

jQuery对象调用on() $("h1").on("click",function (){})
jQuery对象调用bind() $("input").bind("change",function (){})
省略on前缀的事件名作为方法名直接调用$("input").change(function (){})

<script>
    $(function (){
        // 文档加载完毕后执行
        $("h1").on("click",function (){
            // alert("h1被点击");
            alert(this.innerHTML)
            // 原生JS使用原生方法，jQuery对象使用jQuery方法，还可以写成alert($(this).html())
        });
        $("h1").bind("mouseover",function (){
            console.log("mouseover");
        });
        $("h1").mouseout(function (){
            console.log("mouseout");
        });
        $("h1").html("Chancey")
    });
</script>

this

this指代事件的触发事件，直接使用，表示原生JS对象，只能调用原生方法；可以使用$(this)转换为jquery对象，调用jQuery的方法

posted @ 2019-08-21 18:51 ChanceySolo 阅读(415) 评论(0) 编辑收藏举报

刷新页面返回顶部

素心

人生苦短，我用Python。

jQuery

jQuery

一、概述

1. 介绍

2. 使用

3.获取元素

3.1.1 基础选择器

3.1.2 层级选择器

3.1.3 过滤选择器

(1) 匹配第一个

(2) 匹配最后一个

(3) 匹配偶数

(4) 匹配奇数

(5) 匹配下标

(6) 匹配下标（大于）

(7) 匹配下标（小于）

(8) 否定筛选

3.1.4 属性选择器

(1) 包含属性

(2) 指定属性

(3) 模糊匹配

3.1.5 子元素过滤选择器

二、DOM操作

1. 获取元素

2. 操作元素内容

2.1 html()

2.2 text()

2.3 val()

3. 操作元素属性

3.1 设置属性

3.2 删除属性

4. 操作元素样式

5. 层次方法

5.1 父元素

5.2 祖先元素

5.3 子元素

5.4 子元素(所有)

5.5 相邻元素

6. 元素的编辑

6.1 创建

6.2 添加

三、jQuery处理事件

1. 事件绑定

公告

2.1 `html()`

2.2 `text()`

2.3 `val()`