jQuery学习笔记

最新推荐文章于 2024-08-29 20:45:01 发布
最新推荐文章于 2024-08-29 20:45:01 发布
阅读量408 收藏
点赞数
分类专栏： JavaWeb学习 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shmily0822/article/details/122932839
版权
本文详细介绍了jQuery的基础知识，包括其核心函数$的作用，如DOM对象和jQuery对象的转换，以及各种选择器的使用。此外，还讲解了jQuery对象、事件处理、动画效果和常用方法，如html()、text()、val()等。最后，通过实例展示了全选/全不选和动态增删记录的功能，并探讨了jQuery的事件和动画效果。
摘要由CSDN通过智能技术生成

1、jQuery介绍

​ JavaScript+Query（查询），它是辅助JavaScript开发的js类库，它的核心思想是write less，do more，因此实现了很多浏览器兼容问题。

​ jQuery是免费、开源的，其语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其它功能

2、jQuery核心函数$

js原生单击事件

        window.onload = function() {
            var btnObj = document.getElementById("btnId");
            alert(btnObj);
            btnObj.onclick = function() {
                alert("js原生单击事件");
            }
        }

jQuery的单击事件

$(function(){   //相当于window.onload = function(){ }
    var btnId = $("#btnId");   
    btnId.click(function (){
        alert("jQuery的单击事件");
    })
});

$（）函数会根据其传入参数不同而完成不同的功能

  1. 传入参为【函数】时：

    表示页面加载完成之后的操作，相当于window.onload = function(){ }

  2. 传入参数为【HTML字符串】时：

    根据这个字符串创建元素节点dom对象

    $("<div><span>span1</span><span>span2</span></div>").appendTo("body");

  3. 传入参数为【选择器字符串】时：

    根据这个字符串查找元素节点对象

  4. 传入参数为【DOM】对象时：

    将DOM对象包装为jQuery对象返回

3、jQuery对象

jQuery对象的本质：dom对象的数组 + jQuery提供的一系列功能函数

DOM对象和jQuery对象相互转化：

  1. DOM对象转为jQuery对象
    1. 先获取DOM对象
    2. $（DOM对象）返回jQuery对象
  2. jQuery对象转为DOM对象
    1. 先获取jQuery对象
    2. jQuery对象 [ 下标 ] 取出相应的DOM对象

4、jQuery选择器

4.1 基础选择器

  • $（"#id"）：根据id查找标签对象
  • $（".class"）：根据.class类查找标签对象
  • $（“tagName”）：根据标签名查找标签对象，如div、span
  • $（"*"）：选中所有元素
  • $（“selector1 , selector2 , …”）：组合选择器，合并多个选择器的结果并返回

4.2 层级选择器

  • $（“ancestor descendant”）：祖先元素下的后代元素
  • $（“parent > child”）：父元素下的子元素
  • $（“prev + next”）：匹配所有紧接在prev元素后的元素
  • $（“prev ~ siblings”）：匹配prev元素之后的所有兄弟元素

4.3 过滤选择器

基本过滤选择器

  • $（“selector**: first**”）：获取匹配的第一个元素
  • $（“selector : last”）：获取匹配的最后一个元素
  • $（“selector : not（selector）”）：去除所有与给定选择器匹配的元素
  • $（“selector : even”）：匹配所有索引值为偶数的元素，从0开始计数
  • $（“selector : odd”）：匹配所有索引值为奇数的元素，从0开始计数
  • $（“selector : eq（index）”）：匹配一个给定索引值的元素
  • $（“selector : gt（index）”）：匹配所有大于给定索引值的元素
  • $（“selector : lt（index）”）：匹配所有小于给定索引值的元素
  • $（“selector : header”）：匹配所有如h1，h2，h3之类的标题元素
  • $（“selector : animated”）：匹配所有正在执行动画的元素

内容过滤选择器

  • $（“selector : contains（text）”）：匹配包含给定文本text的元素
  • $（“selector : empty”）：匹配所有不会包含子元素或文本的空元素
  • $（“selector : parent”）：匹配含有子元素或文本的元素
  • $（“selector : has（selector）”）：匹配含有选择器所匹配元素的元素

属性过滤选择器

  • $（“selector [ attribute ]”）：匹配包含给定属性的元素
  • $（“selector [ attribute = value ]”）：匹配给定属性是某个特定值的元素
  • $（“selector [ attribute != value ]”）：匹配不含有给定属性、或给定属性不等于特定值的元素
  • $（“selector [ attribute ^= value ]”）：匹配给定属性是以某些值开始的元素
  • $（“selector [ attribute $= value ]”）：匹配给定属性是以某些值结尾的元素
  • $（“selector [ attribute *= value ]”）：匹配给定属性是包含某些值的元素

练习：

$("div[title]")
$("div[title='test']")
$("div[title!='test']")
$("div[title^='te']")
$("div[title$='est']")
$("div[title*='es']")
$("div[id][title*='es']")
$("div[title][title!='test']")

表单过滤选择器

：input

：text

：password

：radio

：checkbox

：submit

：reset

：button

：file

：hidden

：checked

：selected

$(":enabled :text").val("xxxx");

**val（）**可以获取、设置表单项的value属性值

$(":checkbox:checked").each(function (){
	console.log(this.value);
})

**each（function（）{}）**方法是jQuery对象提供用来遍历元素的方法，在遍历的function函数中，有一个this对象，就是当前遍历到的dom对象

4.4 元素的筛选

exp为选择器

  • eq（）：获取给定索引的元素
  • first（）：获取第一个元素
  • last（）：获取最后一个元素
  • filter（exp）：留下匹配的元素
  • is（）：判断是否匹配给定的选择器，只要有一个匹配就返回true
  • has（exp）：返回包含有匹配选择器的元素的元素
  • not（exp）：删除匹配选择器的元素
  • children（exp）：返回匹配给定选择器的子元素
  • find（exp）：返回匹配给定选择器的后代元素
  • next（）：返回当前元素的下一个兄弟元素
  • nextAll（exp）：返回当前元素后面所有的兄弟元素
  • nextUntil（）：返回当前元素到指定匹配的元素为止的后面元素
  • parent（）：返回父元素
  • prev（exp）：返回当前元素的上一个兄弟元素
  • prevAll（）：返回当前元素前面所有的兄弟元素
  • prevUntil（）：返回当前元素到指定匹配的元素为止的前面元素
  • siblings（exp）：返回所有兄弟元素

5、jQuery方法

  • html（）：设置或获取起始标签和结束标签中的内容，和dom属性innerHTML一样

  • text（）：设置或获取起始标签和结束标签中的文本，和dom属性innerText一样

  • val（）：设置或获取表单项的value属性值，和dom属性value一样

  • attr（）：设置或获取属性值，不推荐操作checked、readOnly、selected、disabled等，还可以操作非标准的属性，比如自定义属性：abc…

    .attr（“name”) ——获取

    .attr（“name”, “abc” ） ——设置

  • prop（）：设置或获取属性值，只推荐操作checked、readOnly、selected、disabled等

内部插入

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

外部插入

  • insertAfter（）：a.insertAfter(b)，得到ba
  • insertBefore（）：a.insertBefore(b)，得到ab

替换

  • replaceWith（）：a.replaceWith(b)，用b替换a
  • replaceAll（）：a.replaceAll(b)，用a替换掉所有的b

删除

  • remove（）：a.remove（），删除a标签
  • empty（）：a.empty（），清空a标签里的内容

添加样式

  • addClass（）：向被选元素添加一个或多个类

  • removeClass（）：从被选元素删除一个或多个类

  • toggleClass（）：对被选元素进行添加/删除的切换类操作

  • offset（）：获取或设置元素的位置

    xxx.offset({

    ​ top:100,

    ​ left:50

    })

练习：全选全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../script/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function (){
            //全选
            $("#checkedAllBtn").click(function (){
                $(":checkbox").prop("checked",true);
            });

            //全不选
            $("#checkedNoBtn").click(function (){
               $(":checkbox").prop("checked",false);
            });

            //反选
            $("#checkedRevBtn").click(function (){
                $(":checkbox[name='items']").each(function (){
                    this.checked = !this.checked;
                });
                var allCount = $(":checkbox[name='items']").length;
                var checkedCount = $(":checkbox[name='items']:checked").length;

                $("#checkedAllBox").prop("checked", allCount==checkedCount);

            });

        //    提交
            $("#sendBtn").click(function (){
                list = [];
                $(":checkbox[name='items']:checked").each(function (){
                    list.push(this.value);
                });
                alert(list);
            });

        //  全选/全不选
        $("checkedAllBox").click(function (){
            $(":checkbox[name='items']").prop("checked",this.checked);
        });

        $(":checkbox[name='items']").click(function (){
            var allCount = $(":checkbox[name='items']").length;
            var checkedCount = $(":checkbox[name='items']:checked").length;

            $("#checkedAllBox").prop("checked", allCount==checkedCount);
        });

        })
    </script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br/>
        <input type="button" id="checkedAllBtn" value="全选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRevBtn" value="反选"/>
        <input type="button" id="sendBtn" value="提  交"/>
    </form>
</body>
</html>

练习：动态增删记录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
            margin: 0 auto;
            border: 1px solid black;

        }
    </style>
    <script src="../script/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        var deleteFunction = function () {
            var trObj = $(this).parent().parent();
            if(confirm("确认删除"+trObj.find(":first").text()+"吗？")){
                trObj.remove();
            }
            return false;
        };
        $(function (){
            $("#addEmpButton").click(function () {
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();
                var trObj = $("<tr>" +
                    "            <td>"+name+"</td>" +
                    "            <td>"+email+"</td>" +
                    "            <td>"+salary+"</td>" +
                    "            <td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
                    "        </tr>");
                trObj.appendTo($("#employeeTable"));
                trObj.find("a").click(deleteFunction)
            });
            //给删除的a标签绑定单击事件
            $("a").click(deleteFunction);
        })
    </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th> </th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>Bob@163.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h4 align="center">添加新员工</h4>
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email"/>
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">Submit</button>
                </td>
            </tr>

        </table>
    </div>
</body>
</html>

6、jQuery动画

以下方法都可以添加参数：

  • 第一个参数是动画执行时长，单位是毫秒
  • 第二个参数是动画的回调函数

基本动画

  • show（）：将隐藏的元素显示
  • hide（）：将可见的元素隐藏
  • toggle（）：可见就隐藏，隐藏就显示

淡入淡出动画

  • fadeIn（）：淡入（显示）
  • fadeOut（）：淡出（消失）
  • fadeToggle（）：淡入淡出切换
  • fadeTo（）：在指定时长内将透明度修改到指定值，0透明，1完全可见

7、事件

  1. jQuerr事件在浏览器内核解析完页面的标签创建好dom对象后就执行
  2. 原生js事件在浏览器内核解析完页面的标签创建好dom对象后，等标签的内容显示后才执行
  • click（）：绑定单击事件
  • mouseover（）：鼠标移入事件
  • mouseout（）：鼠标移出事件
  • bind（）：可以给元素一次性绑定一个或多个事件，多个事件名用空格隔开
  • one（）：用法和bind一样，但是绑定的事件只会响应一次
  • unbind（）：跟bind方法相反，解除事件绑定
  • on（）：绑定事件，可以用来绑定选择器匹配的所有元素的事件，即使这个元素是页面加载之后动态创建出来的

阻止事件冒泡：子元素事件中return false

事件对象：在绑定的事件函数声明参数event，可以获取事件触发时的对象

练习：图片跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        img{
            width: 100px;
        }
        #showBig{
            display: none;
        }
    </style>
    <title>Title</title>  <script src="../script/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#small").bind("mouseover mouseout mousemove",function (e) {
                if(e.type=="mouseover"){
                    $("#showBig").show();
                }else if(e.type=="mouseout"){
                    $("#showBig").hide();
                }else {
                    var x = e.originalEvent.pageX;
                    var y = e.originalEvent.pageY;
                    $("#showBig").offset({
                        top:y+10,
                        left: x+10
                    })
                }

            })
        });
    </script>
</head>
<body>
     <img id="small" src="../img/muc.png" />
        <div id="showBig">
            <img src="../img/muc.png" />
        </div>
</body>
</html>
go2studyy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery 学习笔记
天天开心
01-29 195
1 简介 JQuery，是辅助JS开发的库。是一套跨浏览器的JS库，简化HTML与JavaScript之间的操作。极大地简化了遍历HTML文档，操作DOM，处理事件、执行动画和开发Ajax。链式操作，隐式迭代。 2 HelloWorld 1 使用JQuery必须先引入JQuery的库文件，使用script标签引入。 <script type="text/javascript" sr...
jQuery中$.fn的用法
weixin_34038293的博客
10-09 80
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery中$.fn的用法示例介绍
火麒马
01-07 1221
  jQuery中$.fn的用法示例介绍 $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，下面有个不错的示例，喜欢的朋友可以参考下 $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实...
jQuery
qq_36864672的博客
09-27 783
⼀、jQuery的使用 1. jQuery: jQuery 是一个 JavaScript 库。 jQuery 极⼤地简化了 JavaScript 编程。 2. jQuery的使用步骤： 2.1.引入jQuery文件 2.2.使用选择器定位元素 CSS的选择器 #id .class element ... getElementById() -> $("#id") getEle
button点击切换，获取按钮ID
weixin_33743703的博客
05-25 897
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> .sms-type bu...
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
JQuery学习笔记
09-02
以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...
jQuery学习笔记（一）
07-13
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
JavaScript代码片段
weixin_66128399的博客
08-26 374
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 737
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 4622
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1293
JQ基础——DOM操作
vue ref和reactive区别
灰海
08-25 1588
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue2 part3
E___V___E的博客
08-25 885
年龄+1岁添加性别属性，默认值：男修改性别在列表首位添加一个朋友
vue part 5
最新发布
E___V___E的博客
08-29 446
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值