jQuery

最新推荐文章于 2024-07-30 22:36:34 发布

占枫

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量212

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_72041293/article/details/129810105

版权

一、jQuery 介绍

jQuery 就是 JavaScript 和查询(Query)，它就是

辅助 JavaScript 开发的 js 类库

二、jQuery 初体验

使用 jQuery 给一个按钮绑定单击事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        // window.onload = function () {
        //     var btnObj = document.getElementById("btnId");
        //     // alert(btnObj);//[object HTMLButtonElement] ====>>> dom 对象
        //     btnObj.onclick = function () {
        //         alert("js 原生的单击事件");
        //     }
        // }

        $(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
            var $btnObj = $("#btnId"); // 表示按 id 查询标签对象
            $btnObj.click(function () { // 绑定单击事件
                alert("jQuery 的单击事件");
            });
        });

    </script>
</head>
<body>

    <button id="btnId">SayHello</button>

</body>
</html>

小结：

① 使用 jQuery 必须引入 jQuery 库

② jQuery 中的 $ 是一个函数

③ 通过使用 jQuery 查询到标签对象，使用

标签对象 .click(function(){})；

三、jQuery 核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多

功能，$() 就是调用 $ 这个函数

1、传入参数为 [ 函数 ] 时：

表示页面加载完成之后，相当于

window.onload = function(){}

2、传入参数为 [ HTML 字符串 ] 时：

会对我们创建这个 html 标签对象

3、传入参数为 [ 选择器字符串 ] 时：

$(“#id 属性值”);

id 选择器，根据 id 查询标签对象

$(“标签名”);

标签名选择器，根据指定的标签名查询标签对象

$(“.class 属性值”);

类型选择器，可以根据 class 属性查询标签对象

4、传入参数为 [ DOM 对象 ] 时：

会把这个 dom 对象转换为 jQuery 对象

四、jQuery 对象和 dom 对象

1. Dom 对象

① 通过 getElementBy Id () 查询出来的标签对象

是 Dom 对象

② 通过 getElementsBy Name () 查询出来的标签

对象是 Dom 对象

③ 通过 getElementsBy TagName () 查询出来的

标签对象是 Dom 对象

④ 通过 create Element() 方法创建的对象，是

Dom 对象

DOM 对象 Alert 出来的效果是：

[object HTML 标签名 Element]

2. jQuery 对象

① 通过 JQuery 提供的 API 创建的对象，是

JQuery 对象

② 通过 JQuery 包装的 Dom 对象，也是

JQuery 对象

③ 通过 JQuery 提供的 API 查询到的对象，

是 JQuery 对象

jQuery 对象 Alert 出来的效果是： [object Object]

3. jQuery 对象的本质是：

jQuery 对象是 dom 对象的数组 + jQuery 提供的

一系列功能函数

4. jQuery 对象和 Dom 对象使用区别：

jQuery 对象不能使用 Dom 对象的属性和方法

Dom 对象也不能使用 jQuery 对象的属性和方法

5. Dom 对象和 jQuery 对象互转

(1) dom 对象转化为 jQuery 对象

① 先有 DOM 对象

② $((DOM 对象) 就可以转换成为 jQuery 对象

(2) jQuery 对象转化为 dom 对象

① 先有 jQuery 对象

② jQuery 对象[下标] 取出相应的 DOM 对象

五、jQuery 选择器

1. 基本选择器

#id 选择器：根据 id 查找标签对象

.class 选择器：根据 class 查找标签对象

element 选择器：根据标签名查找标签对象

* 选择器：表示任意的，所有的元素

selector 1，selector 2 组合选择器：合并选择器 1，

选择器 2 的结果并返回

p.myClass

表示标签名必须是 p 标签，而且 class 类型还要是

myClass

2. 层级选择器

ancestor descendant 后代选择器：在给定的祖先元

素下匹配所有的后代元素

parent > child 子元素选择器：在给定的父元素下匹配

所有的子元素

prev + next 相邻元素选择器：匹配所有紧接在 prev

元素后的 next 元素

prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素

之后的所有 siblings 元素

3. 过滤选择器

(1) 基本过滤器：

:first                获取第一个元素

:last          获取最后个元素

:not(selector)    去除所有与给定选择器匹配的元素

:even                匹配所有索引值为偶数的元素，从

0 开始计数

:odd 匹配所有索引值为奇数的元素，从

0 开始计数

:eq(index)        匹配一个给定索引值的元素

:gt(index) 匹配所有大于给定索引值的元素

:lt(index) 匹配所有小于给定索引值的元素

:header             匹配如 h1, h2, h3 之类的标题元素

:animated         匹配所有正在执行动画效果的元素

(2) 内容过滤器

:contains(text)         匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本

                                的空元素

:parent                     匹配含有子元素或者文本的元素

:has(selector) 匹配含有选择器所匹配的元素的

                                元素

(3) 属性过滤器

[attribute]                  匹配包含给定属性的

                                                    元素

[attribute=value]                   匹配给定的属性是某

                                                    个特定值的元素

[attribute!=value]                  匹配所有不含有指定

                                                    的属性，或者属性不

                                                    等于特定值的元素

[attribute^=value]                         匹配给定的属性是以

                                                     某些值开始的元素

[attribute$=value]                         匹配给定的属性是以

                                                    某些值结尾的元素

[attribute*=value]                         匹配给定的属性是以

                                                    包含某些值的元素

[attrSel1][attrSel2][attrSelN]          复合属性选择器，需

                                                     要同时满足多个条件

                                                     时使用

(4) 表单过滤器

:input 匹配所有 input, textarea, select

和 button 元素

:text 匹配所有文本输入框

:password        匹配所有的密码输入框

:radio                  匹配所有的单选框

:checkbox          匹配所有的复选框

:submit               匹配所有提交按钮

:image                匹配所有 img 标签

:reset 匹配所有重置按钮

:button                匹配所有 input type=button <button>

按钮

:file                     匹配所有 input type=file 文件上传

:hidden               匹配所有不可见元素 display:none 或

                            input type=hidden

(5) 表单对象属性过滤器

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked                  匹配所有选中的单选，复选，和

                                 下拉列表中选中的 option 标签对象

:selected                  匹配所有选中的 option

六、jQuery 元素筛选

元素名称	作用	功能
eq()	获取给定索引的元素	功能跟 :eq() 一样
first()	获取第一个元素	功能跟 :first 一样
last()	获取最后一个元素	功能跟 :last 一样
filter(exp)	留下匹配的元素
is(exp)	判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp)	返回包含有匹配选择器的元素的元素	功能跟 :has 一样
not(exp)	删除匹配选择器的元素	功能跟 :not 一样
children(exp)	返回匹配给定选择器的子元素	功能跟 parent>child 一样
find(exp)	返回匹配给定选择器的后代元素	功能跟 ancestor descendant 一样
next()	返回当前元素的下一个兄弟元素	功能跟 prev + next 功能一样
nextAll()	返回当前元素后面所有的兄弟元素	功能跟 prev ~ siblings 功能一样
nextUntil()	返回当前元素到指定匹配的元素为止的后面元素
parent()	返回父元素
prev(exp)	返回当前元素的上一个兄弟元素
prevAll()	返回当前元素前面所有的兄弟元素
prevUnit(exp)	返回当前元素到指定匹配的元素为止的前面元素
siblings(exp)	返回所有兄弟元素
add()	把 add 匹配的选择器的元素添加到当前 jquery 对象中

七、jQuery 的属性操作

属性名称	作用
html()	可以设置和获取起始标签和结束标签中的内容	跟 dom 属性 innerHTML 一样
text()	可以设置和获取起始标签和结束标签中的文本	跟 dom 属性 innerText 一样
val()	可以设置和获取表单项的 value 属性值	跟 dom 属性 value 一样
attr()	可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等	attr方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop()	可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled等等

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
/*
            // 批量操作单选
            $(":radio").val(["radio2"]);
            // 批量操作筛选框的选中状态
            $(":checkbox").val(["checkbox3","checkbox2"]);
            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);
            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);
*/

$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
);
        });
    </script>
</head>
<body>
<body>
    单选：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>

    下拉多选 ：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>

    下拉单选 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>
</body>
</html>

八、DOM 的增删改

1. 内部插入

appendTo()	a.appendTo(b)	把 a 插入到 b 子元素末尾，成为最后一个子元素
prependTo()	a.prependTo(b)	把 a 插到 b 所有子元素前面，成为第一个子元素

2. 外部插入

insertAfter()	a.insertAfter(b)	得到 ba
insertBefore()	a.insertBefore(b)	得到 ab

3. 替换

replaceWith()	a.replaceWith(b)	用 b 替换掉 a
replaceAll()	a.replaceAll(b)	用 a 替换掉所有 b

4. 删除

remove()	a.remove();	删除 a 标签
empty()	a.empty();	清空 a 标签里的内容

九、CSS 样式操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式

offset() 获取和设置元素的坐标

十、jQuery 动画

1. 基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏。

toggle() 可见就隐藏，不可见就显示

以上动画方法都可以添加参数：

① 第一个参数是动画执行的时长，以毫秒为

单位

② 第二个参数是动画的回调函数 (动画完成后

自动调用的函数)

2. 淡入淡出动画

fadeIn()                  淡入（慢慢可见）

fadeOut()               淡出（慢慢消失）

fadeTo()                 在指定时长内慢慢的将透明

                             度修改到指定的值

                              0 透明，1 完成可见，0.5 半

                             透明

fadeToggle()         淡入/淡出切换

十一、jQuery 事件操作

1. $( function(){} ); 和 window.onload = function(){}

的区别

(1) 触发的时机

① jQuery 的页面加载完成之后是浏览器的内核

解析完页面的标签创建好 DOM 对象之后就会

马上执行

② 原生 js 的页面加载完成之后，除了要等浏览

器内核解析完标签创建好 DOM 对象，还要

等标签显示时需要的内容加载完成

(2) 触发的顺序

① jQuery 页面加载完成之后先执行

② 原生 js 的页面加载完成之后

(3) 执行的次数

① 原生 js 的页面加载完成之后，只会执行最后

一次的赋值函数

② jQuery 的页面加载完成之后是全部把注册的

function 函数，依次顺序全部执行

2. jQuery 中其他的事件处理方法

click()                        可以绑定单击事件，以及

触发单击事件

mouseover()               鼠标移入事件

mouseout()               鼠标移出事件

bind()                          可以给元素一次性绑定一个

或多个事件

one() 使用上跟 bind 一样，但是

one 方法绑定的事件只会响

应一次

unbind() 跟 bind 方法相反的操作，解

除事件的绑定

live()                            也是用来绑定事件，它可以用

来绑定选择器匹配的所有元素

的事件，哪怕这个元素是后面

动态创建出来的也有效

3. 事件的冒泡

事件的冒泡是指父子元素同时监听同一个事件，当触发

子元素的事件的时候，同一个事件也被传递到了父元素

的事件里去响应

在子元素事件函数体内，ruturn false；可以阻止事件的

冒泡传递

4. JavaScript 事件对象

事件对象是封装有触发的事件信息的一个 JavaScript 对象

在给元素绑定事件的时候，在事件的 function( event )

参数列表中添加一个参数，这个参数名，我们习惯取名

为 event

这个 event 就是 javascript 传递参事件处理函数的事件

对象

比如：

// ① 原生 JavaScript 获取事件对象

window.onload = function () {
    document.getElementById("areaDiv").onclick = function (event) {
        console.log(event);
    }
}

// ② jQuery 代码获取事件对象

$(function () {
    $("#areaDiv").click(function (event) {
        console.log(event);
    });
});

// ③ 使用 bind 同时对多个事件绑定同一个函数

$("#areaDiv").bind("mouseover mouseout",function (event) {
    if (event.type == "mouseover") {
        console.log("鼠标移入");
    } else if (event.type == "mouseout") {
        console.log("鼠标移出");
    }
});

占枫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

素下匹配所有的后代元素。可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled等等。[attribute^=value] 匹配给定的属性是以。[attribute$=value] 匹配给定的属性是以。可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等。[attribute!one 方法绑定的事件。
复制链接

扫一扫