JQuery——基本语法 - Melonico's blog

2021-03-15

642

原创

JQuery

JQuery是一个JavaScript框架，能够简化JS的开发，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

下载JQuery

可以在JQuery官网(https://jquery.com/)下载JQuery的js文件

下载时有两种版本可以选择

Production version，生产版本，实际开发中使用，源码经过压缩和精简，后缀名为.min.js
Development version，开发版本，源代码有缩进及注释，可以查看源码，后缀名为.js

导入JQuery

<script src="jquery-3.5.1.js"></script>

JQuery基础语法

 $(选择器名称).action()

示例：获取元素对象并输出标签体内容

// JQuery
var div_jq = $("#div");
alert(div_jq.html());
// JavaScript
var div_js = document.getElementById("div");
alert(div_js.innerHTML);

JQ对象和JS对象的区别

通过JS获取页面上所有的div标签对象

var divs = document.getElementsByTagName("div");
alert(divs); // 弹出 [object HTMLCollection]

// 将所有div标签体内容更改为123
for (var i = 0; i < divs.length ; i++) {
	divs[i].innerHTML = "123";
}

通过JQ获取页面上所有的div标签对象

var $divs = $("div");
alert($divs); // 弹出 [object Object]

// 将所有div标签体内容更改为456
$divs.html("456");

通过以上代码可以发现，JQuery对象在操作时更加方便，但是JQuery对象和JS对象的方法是不通用的

var div = document.getElementById("div");
div.html("123"); // 不生效，标签体内容不发生改变

JQ对象和JS对象的转换

JS对象转为JQ对象：$(JS对象)

var div = document.getElementById("div");
var $div = $(div);

JQ对象转为JS对象：JQ对象[索引] 或 JQ对象.get(索引)

var $div = $("#div");
var div1 = $div[0];
var div2 = $div.get(0);

JQuery事件绑定

获取元素对象并绑定一个点击事件

$(选择器).click();

click方法括号内可以自定义匿名方法

$(选择器).click(function(){
    // 方法体
});

示例

$("#div").click(function () {
	alert("click");
});

入口函数

JQuery入口函数

$(document).ready(function(){
    // 执行代码
});

或者

$(function(){
    // 执行代码
});

JQuery的入口函数是在DOM加载完毕后执行，且可以定义多次，后定义的入口函数不会覆盖之前的入口函数

$(function () {
	alert("abc");
})
$(function () {
	alert("123");
})

可以弹出 abc 和 123

JavaScript入口函数

window.onload = function () {
    // 执行代码
}

JavaScript的入口函数是在页面所有内容，包括外部图片之类的文件加载完毕后执行，且只能执行一次，若定义了多个入口函数，则后面的函数会覆盖之前的函数

window.onload = function () {
	alert("abc");
}
window.onload = function () {
    alert("123");
}

只弹出 123

JQuery样式控制

// 单个属性 用逗号分隔属性与属性值
$("#div").css("color","white");

// 多个属性 用花括号框起，用冒号分隔属性与属性值，并用逗号分隔多个属性
$("#div").css({"color":"white","background-color":"red"});

选择器

筛选具有相似特征的元素（标签）

1. 基本选择器

① 标签选择器（元素选择器）

语法：$("HTML标签名") 获得所有匹配标签名称的元素

$("div"); // 选择页面上的所有 <div> 元素

② id选择器

语法：$("#id属性值") 获得指定id属性值的元素

$("#div1"); // 选择id为 div1 的元素

③ 类选择器

语法：$(".class属性值") 获得指定class属性值的元素

$(".div2"); // 选择所有class值为 div2 的元素

④ 并集选择器

语法：$("选择器1,选择器2,......,选择器n") 获取多个选择器中的元素

$("div,#test") // 获取页面上所有 <div> 元素和id为 test 的元素

2. 层级选择器

① 后代选择器

语法：$("A B") 选择A元素内部的所有B元素

② 子选择器

语法：$("A > B") 选择A元素内部的所有B子元素

示例

<body>
    <div>
        <p><span>div内部span</span></p>
        <span>div内部span + div子span</span>
    </div>
    <input type="button" id="btn1" value="内部span">
    <input type="button" id="btn2" value="子span">
    <script>
        $("#btn1").click(function () {
            $("div span").css("color","red");
        })
        $("#btn2").click(function () {
            $("div > span").css("color","blue");
        })
    </script>
</body>

3. 属性选择器

① 属性名称选择器

语法：$("A[属性名]") 选择包含指定属性的A元素
$("[属性名]") 选择包含指定属性的元素

$("input[type]"); // 选择页面上所有包含 type 属性的 <input> 元素
$("[type]"); // 选择包含 type 属性的所有元素

② 属性选择器

语法：$("A[属性名 = '属性值']") 选择包含指定属性且等于属性值的A元素

$("input[type = button]"); // 选择页面上所有包含 type 属性且属性值为 button 的 <input> 元素

③ 复合属性选择器

语法：$("A[ 属性名1 = '属性值1' ][ 属性值2: = '属性名2' ]") 选择包含多个属性条件的A元素，多个属性条件之间没有空格

$("input[type = 'button'][value = 'check']"); // 选择满足属性条件的 <input> 元素

4. 过滤选择器

① 首元素选择器

语法：:first 获得选择的元素中的第一个元素

② 尾元素选择器

语法：:last 获得选择的元素中的最后一个元素

③ 非元素选择器

语法：:not(选择器) 获得不包括指定内容的元素

④ 偶数选择器

语法：:even 获得选择元素中索引为偶数的元素，从0开始计数

⑤ 奇数选择器

语法：:odd 获得选择元素中索引为奇数的元素，从0开始计数

⑥ 等于索引选择器

语法：:eq(index) 获得选择元素中等于指定索引的元素

⑦ 大于索引选择器

语法：:gt(index) 获得选择元素中大于指定索引的元素

⑧ 小于索引选择器

语法：:lt(index) 获得选择元素中小于指定索引的元素

⑨ 标题选择器

语法：:header 获得所有标题元素

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <script src="jquery-3.5.1.js"></script>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
    <div class="b">5</div>
    <div class="a">6</div>
    <input id="first" type="button" value="first">
    <input id="last" type="button" value="last">
    <input id="even" type="button" value="even">
    <input id="odd" type="button" value="odd">
    <input id="not" type="button" value="not">
    <input id="eq" type="button" value="eq">
    <input id="gt" type="button" value="gt">
    <input id="lt" type="button" value="lt">
    <input id="header" type="button" value="header">
    <input id="reset" type="button" value="reset">
    <script>
        $("#first").click(function () {
            $("div:first").css("background-color","red");
        })
        $("#last").click(function () {
            $("div:last").css("background-color","blue");
        })
        $("#even").click(function () {
            $("div:even").css("background-color","yellow");
        })
        $("#odd").click(function () {
            $("div:odd").css("background-color","pink");
        })
        $("#not").click(function () {
            $("div:not(.a)").css("background-color","grey");
        })
        $("#eq").click(function () {
            $("div:eq(3)").css("background-color","purple");
        })
        $("#lt").click(function () {
            $("div:lt(3)").css("background-color","orange");
        })
        $("#gt").click(function () {
            $("div:gt(3)").css("background-color","red");
        })
        $("#header").click(function () {
            $(":header").css("background-color","green");
        })
        $("#reset").click(function () {
            $("div,:header").css("background-color","white");
        })
    </script>
</body>
</html>

5. 表单过滤选择器

① 可用元素选择器

语法：:enabled 获得可用的元素

② 不可用元素选择器

语法：:disabled 获得不可用的元素

③ 选中选择器

语法：:checked 获得单选/复选框选中的元素

④ 下拉框选中选择器

语法：:selected 获得下拉框选中的元素

DOM操作

1. 内容操作

① html()：获取/设置元素的标签体内容

// 获取元素标签体内容
var div_html = $("#div").html();
// 设置元素标签体内容
$("#div").html("<input type='text'>");

该方法相当于JavaScript中的innerHTML属性

// 获取元素标签体内容
var div_html = document.getElementById("div").innerHTML;
// 设置元素标签体内容
document.getElementById("div").innerHTML = "<input type='text'>";

② text()：获取/设置元素的标签体纯文本内容

// 获取元素标签体文本内容
var div_text = $("#div").text();
// 设置元素标签体文本内容
$("#div").text("123");

该方法相当于JavaScript中的innerText属性

// 获取元素标签体文本内容
var div_text = document.getElementById("div").innerText;
// 设置元素标签体文本内容
document.getElementById("div").innerText = "123";

③ val()：获取/设置元素的value属性值

// 获取元素的value属性值
var input_val = $("#input").val();
// 设置元素的value属性值
$("#input").val("abc");

该方法相当于JavaScript中的value属性

// 获取元素的value属性值
var input_val = document.getElementById("input").value;
// 设置元素的value属性值
document.getElementById("input").value = "abc";

2. 属性操作

(1). 通用属性操作

① attr()：获取/设置元素的属性

// 获取元素属性值
var input_type = $("#input").attr("type");
// 修改元素属性值
$("#input").attr("type","text");

② removeAttr()：删除属性

$("#input").removeAttr("name");

③ prop()：获取/设置元素的属性

// 获取元素属性值
var input_type = $("#input").prop("type");
// 修改元素属性值
$("#input").prop("type","text");

④ removeProp()：删除属性

attr和prop的区别

若操作元素的固有属性，则推荐使用prop方法

若操作元素的自定义属性，则推荐使用attr方法

<div id="div" ziDing="zidingyi"></div>
<script>
    alert($("#div").attr("ziDing")); //弹出 zidingyi
    alert($("#div").prop("ziDing")); //弹出 undefined
</script>

对于 checked / selected / disabled 这些方法，若元素定义过这些属性，attr()方法会返回对应属性名的字符串，而prop()方法会返回一个布尔值

<input name="123" id="input" type="checkbox" checked="true">
<script>
    document.write($("#input").prop("checked")); // 输出 true
    document.write($("#input").attr("checked")); // 输出 checked
</script>

若没有定义这些属性，prop()方法会返回这些属性的默认布尔值，attr()方法则返回undefined

 <input name="123" id="input" type="checkbox" checked="true">
<script>
    document.write($("#input").prop("disabled")); // 输出 false
    document.write($("#input").attr("disabled")); // 输出 undefined
</script>

(2). 对class属性操作

① addClass()：添加class属性值

$("#div").addClass("red");

② removeClass()：删除class属性值

$("#div").removeClass("red");

③ toggleClass()：切换class属性

若元素有对应属性，则删除对应属性，若元素没有对应属性，则添加对应属性

<div class="red" id="div">This is a div</div>
<script>
    $("#div").toggleClass("red"); // div的class属性包含red 则删除red
    $("#div").toggleClass("blue"); // div的class属性不包含blue 则添加blue
</script>

3. CRUD操作

① append()：父元素将子元素追加到末尾

父元素.append(子元素);

var p = document.createElement("p");
$(p).html("This is a p");
$("#div").append(p); // div标签将p标签追加到末尾

② appendTo()：将子元素追加到父元素末尾

子元素.appendTo(父元素);

var p = document.createElement("p");
$(p).html("This is a p");
$(p).appendTo($("#div")); // 将p标签追加到div标签末尾

③ prepend()：父元素将子元素添加到开头

父元素.prepend(子元素);

var p = document.createElement("p");
$(p).html("This is a p");
$("#div").prepend(p); // div标签将p标签添加到开头

④ prependTo()：将子元素添加到父元素开头

子元素.prependTo(父元素);

var p = document.createElement("p");
$(p).html("This is a p");
$(p).prependTo($("#div")); // 将p标签添加到div标签开头

⑤ after()：添加对应元素到元素之后

$(obj1).after(obj2); // 将obj2添加到obj1之后

⑥ before()：添加对应元素到元素之前

$(obj1).before(obj2); // 将obj2添加到obj1之前

⑦ insertAfter()：添加元素到对应元素之前

$(obj1).insertAfter(obj2); // 将obj1添加到obj2之后

⑧ insertBefore()：添加元素到对应元素之后

$(obj1).insertBefore(obj2); // 将obj1添加到obj2之前

在方法 ⑤ ⑥ ⑦ ⑧ 中，两个元素应为兄弟关系

⑨ remove()：移除元素

obj.remove(); // 删除obj元素

⑩ empty()：清空元素的所有后代元素

obj.empty(); // 删除obj的所有后代元素，保留obj元素

JQuery

作者：Melonico
发表时间：2021-03-15 17:43
更新时间：2021-03-15 17:43

暂无评论，快来发表第一个评论吧!