Jquery基础篇1-下载和使用-和DOM的区别-选择器-常用工具（$.each、￥.trim等）

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它使得 HTML 文档遍历和操作、事件处理、动画和 Ajax 交互对于 Web 开发来说更加简单。jQuery 的设计思想是“写的更少，做的更多”（write less, do more），它极大地简化了 JavaScript 编程的复杂性，特别是与 DOM（文档对象模型）的交互和 Ajax 编程。

1.下载和使用

官网：https://jquery.com/

插件的下载（中文网更易理解）：https://www.jq22.com/

1.1引入jQuery（根据自己的路径引入）

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

CDN引入

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1.2jQuery的使用：入口函数

  $(document).ready(function ()  {
   })

  $(function ()  {})

2.Jquery和dom对象的异同

异同点2.1

2.1.1相同点

目标相同：它们都是用来操作网页上的元素（如按钮、文本框等）的。
互操作性：jQuery对象和DOM对象可以相互转换，这意味着你可以根据需要使用jQuery的便利功能或原生JavaScript的强大能力。

2.1.2不同点

本质：
- DOM对象：是原生JavaScript对象，直接使用JavaScript的DOM API来操作网页上的元素。每个DOM对象都是特定元素的一个实例，如通过document.getElementById()或document.querySelector()等方法获取的元素。
- jQuery对象：是一个封装了DOM元素的数组（尽管看起来像一个对象），提供了比原生DOM API更加丰富和简便的方法来操作DOM元素。每个jQuery对象都包含了零个或多个DOM元素的集合，并且提供了链式调用、动画、事件处理等功能。
方法调用：
- DOM对象：使用JavaScript的原生方法进行操作，如element.style.display = "none";或element.onclick = function() {...};。
- jQuery对象：使用jQuery提供的方法进行操作，如$(element).hide();或$(element).click(function() {...});。jQuery方法通常更加简洁，并且支持链式调用，即可以在一个表达式中连续调用多个方法。
选择器：
- DOM对象：通常使用document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(), document.querySelector(), document.querySelectorAll()等方法来选择元素。
- jQuery对象：使用$()函数和jQuery特有的选择器语法来选择元素，如$("#myId"), $(".myClass"), $("div")等。jQuery选择器比原生JavaScript的选择器更加强大和灵活。
兼容性：
- DOM对象：原生JavaScript的DOM API在不同浏览器中的兼容性可能会有所不同，尽管现代浏览器已经很好地支持了这些API。
- jQuery对象：jQuery库设计之初就考虑了跨浏览器的兼容性，它封装了不同浏览器之间的差异，使得开发者可以使用统一的API来操作DOM元素，而无需担心浏览器的兼容性问题。
性能：
- 在大多数情况下，原生JavaScript（即DOM对象）的性能要优于jQuery，因为jQuery是在原生JavaScript的基础上添加了一层封装。然而，对于复杂的DOM操作和事件处理，jQuery提供的链式调用和简洁的API可能会使代码更加清晰和易于维护，从而在某些情况下提高开发效率。

2.2jQuery和DOM对象的转换

2.2.1DOM对象转换为jQuery对象

// 假设有一个DOM元素  
var domObj = document.getElementById("myId");  
  
// 将DOM对象转换为jQuery对象  
var jqueryObj = $(domObj);  
  
// 现在可以使用jQuery的方法来操作这个元素了  
jqueryObj.hide(); // 隐藏元素

简写

$('div')

2.2.2jQuery对象转换为DOM对象

// 假设有一个jQuery对象  
var jqueryObj = $("#myId"); // 获取ID为myId的元素  
  
// 通过索引方式获取DOM对象  
var domObj1 = jqueryObj[0];  
  
// 通过.get(index)方法获取DOM对象  
var domObj2 = jqueryObj.get(0);  
  
// 现在可以使用原生JavaScript的方法来操作这个DOM元素了  
domObj1.style.display = "none"; // 隐藏元素

简写

$('div').get(index)
$('div')[index]

3.JQuery选择器

3.1基本选择器

选择器类型	用法
标签选择器	$("p")
ID选择器	$("#myId")
类选择器	$(".myClass")
属性选择器	$("input[type='checkbox']")
通配符选择器	$(".box3*")
并集选择器	$(".box1,.box2")
交集选择器	$("a.myLink")
子代选择器	$(".box1 >.box2")
后代选择器	$("ul li:first-child")

代码示例：HTML代码

    <h1>标签选择器</h1>
    <button id="myBtn">我是ID选择器</button>
    <p class="myClass">我是类选择器</p>
    <a href="#" class="myLink">我是属性选择器</a>
    <input type="checkbox" name="" id="">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <p>通配符选择器</p>
        <p>通配符选择器</p>
        <p>通配符选择器</p>
    </div>
    <ul>
        <li class="item1"></li>
        <li>相邻兄弟选择器</li>
        <li>通用兄弟选择器</li>
    </ul>

元素选择器：

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

选择页面上所有的 <h1> 元素，并将它们的文字颜色设置为红色。

ID选择器：

$("#myBtn").click(function () {  
    $("h1").text("Hello jQuery!");  
});

选择 ID 为 myBtn 的元素，并为其绑定一个点击事件。当该元素被点击时，页面上所有的 <h1> 元素的文本内容将被更改为 "Hello jQuery!"。

类选择器：

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

选择所有具有 class="myClass" 的元素，并将它们的背景颜色设置为黄色。

属性选择器和元素选择器结合（交集选择器）：

$("a.myLink").attr("href", "https://www.jquery.com/");

选择所有同时是 <a> 元素且类名为 myLink 的元素，然后将它们的 href 属性值设置为 "https://www.jquery.com/"。

属性选择器：

$("input[type='checkbox']").prop("checked", true);

选择所有 type 属性为 checkbox 的 <input> 元素，并将它们设置为选中状态。

并集选择器：

$(".box1,.box2").css("border", "1px solid black");

选择所有具有 class="box1" 或 class="box2" 的元素，并将它们的边框设置为 1 像素宽的黑色实线。

通配符选择器：

标准的通配符选择器是 *，用于选择页面上的所有元素。.box3 *（注意空格），而是选择了 .box3 下的所有后代元素。
标准的通配符选择器用法示例：

$("*").css("font-size", "14px"); // 将页面上所有元素的字体大小设置为 14px

3.2层级选择器

3.2.1子元素选择器：

$(".box1 >.box2").css("margin-top", "10px");

选择所有 .box1 元素的直接子元素中类名为 box2 的元素，并将它们的上边距设置为 10 像素。注意，这里只选择直接子元素。

3.2.2后代选择器：

$("ul li:first-child").css("color", "blue");

选择所有 <ul> 元素中作为第一个子元素的 <li> 元素，并将它们的文字颜色设置为蓝色。这里的 :first-child 伪类选择器用于选择每个父元素的第一个子元素。

3.2.3兄弟选择器：

    <ul>
        <li class="item1"></li>
        <li></li>
        <li></li>
    </ul>

相邻兄弟选择器和通用兄弟选择器

                    //选择后面的第一个li
            $(".item1 + li").css("font-size", "20px");
            //选择.item后面所有的li
            $(".item1~li").css("font-size", "20px");

3.3过滤选择器

用法	作用
$(".box2").prev().	选取紧接在.box2元素之前的同级元素
$(".box2").siblings().	选取.box2元素的所有同级元素（不包括.box2本身）
$(".box2").siblings(".box1")	选取.box2元素的所有.box1类名的同级元素
$(".box2").parent()	查找父级
$.("ul").childern("li")	相当于子代选择器$("ul>li")
$.("ul").find('li')	相当于后代选择器$("ul li")
$(".box2").next()	查找当前元素之后的元素
$("div").not(".box2")	选取所有不是.box2类的div元素

代码示例：

 //相邻兄弟元素选择器
            $(".box2").prev().css("margin-bottom", "10px");
            //兄弟元素选择器
            $(".box2").siblings().css("border", "1px dotted gray");
            //相邻同胞元素选择器
            $(".box2").siblings(".box1").css("margin-top", "20px");
            //父元素选择器
            $(".box2").parent().css("border", "2px solid blue");
            //下一个兄弟元素选择器
            $(".box2").next().css("margin-top", "20px");
            //过滤器
            $("div").not(".box2").css("background-color", "green");
            $("div").hasClass("box1").css("font-size", "20px");

:first 伪类选择器：选取所有div元素中的第一个，并设置字体加粗。
:last 伪类选择器：选取所有div元素中的最后一个，并设置字体大小。
:even 和 :odd 伪类选择器：分别选取索引为偶数和奇数的div元素（索引从0开始），并设置不同的背景色。

:eq(index) 伪类选择器：选取索引等于指定值的元素，这里选取索引为2的div元素，并设置边框。

<body>
    <table cellspacing="0" cellpadding="10px" border="2">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>爱丽</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>光明秀</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>老弱弱</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李帅帅</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </table>
    <script>
        $(document).ready(function ()  {
           
$("tr:even").css("background-color", "yellow"); // 偶数行背景色为黄色
$("tr:odd").css("background-color", "pink"); // 奇数行背景色为粉色
 $("tr:first").css("background-color", "green");
 $("tr:eq(2)").css("background-color", "red"); // 第三行背景色为红色
    </script>
</body>

:gt(index) 和 :lt(index) 伪类选择器：分别选取索引大于和小于指定值的元素，这里分别设置不同的背景色。

$("tr:gt(1)").css("background-color", "purple"); // 第2行之后的行背景色为紫色
$("tr:lt(1)").css("background-color", "purple"); //第2行之前的行背景色为紫色

:contains(text) 伪类选择器：选取包含指定文本的元素，这里选取包含"box"文本的div元素，并设置边框。
```
$("tr:contains('女')").css("background-color", "skyblue"); // 包含女字的行背景色为绿色
```
:has(selector) 伪类选择器：选取包含至少一个匹配指定选择器的子元素的元素，这里选取包含<p>标签的div元素，并设置边框。
```
$("tr:has('18')").css("background-color", "blue"); // 包含18字的行背景色为蓝色
```
:empty 伪类选择器：选取没有子元素（包括文本节点）的元素，并设置边框。
```
            $("div:empty").css("border", "2px solid orange");
```
:parent 伪类选择器：选取含有子元素（包括文本节点）的元素，并设置边框。
:hidden 伪类选择器：选取所有不可见的元素，并设置边框。注意，这包括display: none或visibility: hidden的元素，但不包括opacity: 0的元素。
:visible 伪类选择器：选取所有可见的元素，并设置边框。
:animated 伪类选择器：选取所有正在执行动画的元素，并设置边框。注意，这通常用于jQuery动画效果。
:focus 伪类选择器：选取当前获得焦点的元素，并设置边框。这通常用于表单元素。
:hover 伪类选择器：虽然这里使用了:hover，但请注意，jQuery的:hover通常用作事件处理的一部分，而不是直接用于选择器。在CSS中，:hover用于定义鼠标悬停时的样式。
:lang(language) 伪类选择器：选取具有指定lang属性的元素，并设置边框。这里选取lang="en"的div元素。
:enabled 和 :disabled 伪类选择器：通常用于表单元素，分别选取启用和禁用的元素。但在这里尝试对div元素使用可能不会有预期效果，因为div元素不支持disabled属性。
```
            $("div:enabled").css("border", "2px solid yellow");
            $("div:disabled").css("border", "2px solid black");
```
:selected 和 :checked 伪类选择器：分别用于选取下拉列表中被选中的<option>元素和复选框/单选按钮中被选中的元素。
```
     $("div:selected").css("border", "2px solid blue");
            $("div:checked").css("border", "2px solid red");
```

3.4表单选择器

代码HTML

    <h1>form表单选择器</h1>
    <form action="">
        <input type="text" name="" id="">
        <input type="password" name="" id="">
        <input type="color" name="" id="">
        <label for="checkbox1">西瓜</label>
        <input type="checkbox" name="option" id="checkbox1">
        <label for="checkbox2">哈密瓜</label>
        <input type="checkbox" name="option" id="checkbox2">
        <label for="checkbox3">菠萝</label>
        <input type="checkbox" name="option" id="checkbox3">
    <label for="option1">猕猴桃</label>  
<input type="radio" name="optionGroup" id="option1" value="1">  
<label for="option2">菠萝蜜</label>  
<input type="radio" name="optionGroup" id="option2" value="2">
        <input type="submit" name="" id="">
        <input type="reset" name="" id="">
        <select name="cars" id="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
</select>
<textarea name="" id=""></textarea>

JQuery代码

表单选择器

            $("input:submit").css("background-color", "green");
            $("input:password").css("background-color", "yellow");
            $("input:color").css("background-color", "purple");
            $("input:checkbox").css("background-color", "orange");
            $("input:radio").css("background-color", "pink");
            $("input:reset").css("background-color", "brown");
            $("select").css("background-color", "blue");
            $("textarea").css("color", "skyblue");

也可以用属性选择器

            $("input[type='text']").css("background-color", "red");
            $('input[name="checkbox"]') // 选择所有 name 属性为 checkbox的输入元素  
            $('input[disabled]') // 选择所有禁用的输入元素

4.jQuery常用工具

$.each()

一个通用的迭代函数，它可以用来遍历对象和数组。

遍历数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
$.each(fruits, function(index, value) {  
    console.log(index + ": " + value);  
});  
// 输出:  
// 0: Banana  
// 1: Orange  
// 2: Apple  
// 3: Mango

遍历对象

var person = {  
    firstName: "John",  
    lastName: "Doe",  
    age: 50,  
    email: "john.doe@example.com"  
};  
$.each(person, function(key, value) {  
    console.log(key + ": " + value);  
});  
// 输出:  
// firstName: John  
// lastName: Doe  
// age: 50  
// email: john.doe@example.com

$.trim()

去除字符串两端的空白字符。

var text = "   Hello, world!   ";  
var trimmedText = $.trim(text);  
console.log(trimmedText); // 输出: Hello, world!

$.type()

确定 JavaScript 对象的类型（如 "array", "boolean", "function" 等）

console.log($.type(""));         // 输出: string  
console.log($.type(0));          // 输出: number  
console.log($.type(true));       // 输出: boolean  
console.log($.type(undefined));  // 输出: undefined  
console.log($.type(null));       // 输出: null  
console.log($.type({}));         // 输出: object  
console.log($.type([]));         // 输出: array  
console.log($.type(function(){})); // 输出: function  
  
// 注意：对于数组和null，虽然 typeof 操作符也会返回 "object"，但 $.type() 提供了更准确的类型信息

$.isArray()

用于检查给定的参数是否是一个数组。如果参数是数组，则返回 true；否则返回 false。这个方法比 JavaScript 原生的 Array.isArray() 方法更早出现在 jQuery 中，但在现代浏览器中，推荐使用原生的 Array.isArray() 方法，因为它更标准且不需要依赖 jQuery。

var array = [1, 2, 3];  
var nonArray = "not an array";  
  
console.log($.isArray(array)); // true  
console.log($.isArray(nonArray)); // false  
  
// 如果环境支持，也可以使用原生的 Array.isArray()  
console.log(Array.isArray(array)); // true  
console.log(Array.isArray(nonArray)); // false

$.isFunction()

用于检查给定的参数是否是一个函数。如果参数是函数，则返回 true；否则返回 false。这个方法在处理回调函数或动态函数类型检查时非常有用。

function testFunction() {  
    // 这是一个函数  
}  
  
var notAFunction = "not a function";  
  
console.log($.isFunction(testFunction)); // true  
console.log($.isFunction(notAFunction)); // false  
  
// 如果只是检查是否为函数，也可以使用 JavaScript 的 typeof 操作符  
// 但请注意，typeof 在某些特殊函数（如 null 和 undefined）上可能不够准确  
console.log(typeof testFunction === 'function'); // true  
console.log(typeof notAFunction === 'function'); // false

数组和对象操作

$.extend()

用于将一个或多个对象的内容合并到第一个对象。这是一个非常有用的方法，特别是在设置插件选项或合并多个配置对象时。

深层合并:当传递 true 作为第一个参数时，$.extend() 执行深层复制。此时，源对象中的对象属性值也会被递归地合并到目标对象中

var object1 = { apple: 0, banana: { weight: 52, price: 100 } };  
var object2 = { banana: { price: 200 }, cherry: 97 };  
$.extend(true, object1, object2);  
console.log(object1);  
// { apple: 0, banana: { weight: 52, price: 200 }, cherry: 97 }

浅层合并

//$.extend的使用
    var obj1 = {name: "John", age: 25};
    var obj2 = {city: "New York"};
    $.extend(obj1, obj2);
    console.log(obj1);  // 输出: {name: "John", age: 25, city: "New York"}

$.map()

类似于数组的 map() 方法，但它也可以用于对象。它遍历数组或对象的每个元素，并通过提供的函数转换每个元素，最后返回一个新数组。


var numbers = [1, 4, 9];  
var roots = $.map(numbers, Math.sqrt);  
console.log(roots); // [1, 2, 3]

回调和函数

$.proxy()

改变函数的上下文（this 指向）。这在处理回调函数时特别有用，因为回调函数通常会在不同的上下文中被调用

// $.proxy(function, context)

// function: 要绑定的函数

// context: 绑定的函数的上下文对象

var obj = {  
  name: "John",  
  test: function() {  
    console.log(this.name);  
  }  
};  
var anotherObj = {  
  name: "Jane"  
};  
var func = $.proxy(obj.test, anotherObj);  
func(); // 输出: Jane

$.makeArray()

是 jQuery 中的一个实用方法，用于将一个类数组对象（array-like object）或类似数组的对象（比如函数的 arguments 对象）转换成一个真正的 JavaScript 数组。这个方法非常有用，因为在 JavaScript 中，虽然很多对象看起来像数组（比如它们有数字索引和 length 属性），但它们实际上并不是真正的数组，因此不拥有数组的方法，如 push、pop、slice 等

    //$.makeArray的使用
    var arr = (1, 2, 3);
    var newArr = $.makeArray(arr);
    console.log(newArr);  // 输出: [1, 2, 3]

垦利不

关注

31
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫