四、jQuery笔记

ops/2025/2/4 18:51:48/

（一）jQuery概述

  • jQuery本身是js的一个轻量级的库，封装了一个对象jQuery，jquery的所有语法都在jQuery对象中

  • 浏览器不认识jquery，只渲染html、css和js代码，需要先导入jQuery文件，官网下载即可

  • jQuery中文说明文档：https://hemin.cn/jq/

（二）jQuery要点

1、jQuery对象 

  • 通过jQuery包装DOM对象后产生的对象。
  • jQuery对象用$符号表示
  • 给jQuery对象命名引用时，通常标识符前面加个$符，与DOM对象的引用区分开来
  • jQuery代码和js代码可以混着用，比如绑定事件处理函数仍旧可以用js的几种方式，只是js对象调用DOM方法和属性，jQuery对象也调用自己的方法
  • DOM对象和jQuery对象可以互相转换：
    • 用$符号把DOM对象括起来就变成了jQuery对象，如：$(this)
    • jQuery加上[0]就变成了DOM对象，如：$("p")[0]

2、jQuery的语法 

可以概括为$(selector).action()的形式，

2.1 selector

选择器和筛选器：

  • id选择器拿到的是唯一的标签对象；
  • 其他选择器得到的是标签对象数组；
  • jquery会自动循环处理每个元素，不用自己再写循环语句一个个处理
（1）基本选择器 

基本格式：$("css-selector") 

（1.1）通用选择器
$("*").css("color", "green")
（1.2）id选择器
$("#jquery").css("color", "red")
（1.3）class选择器
$(".hl").css("color", "gold")
（1.5）标签选择器
$("div").css("color", "black")
（1.6）并列多选选择器
$(".hl,div").css("color", "gold")
（2）层级选择器
（2.1）后代选择器 
$(".hl div").css("color", "red")
（2.2）子代选择器 
$(".hl>div").css("color", "red")
（2.3）毗邻选择器(下面紧挨着的兄弟标签)
$(".hl+p").css("color", "blue")
（2.4）下方兄弟选择器（不用紧挨着）
$(".hl~p").css("color", "red")
（3）属性选择器
$("[name]").css("color", "red")
$("[name='789']").css("color", "blue")
$("[name='789'][alex='111']").css("color", "red")
（4）表单选择器（只有inpput的type属性才行）
$(":text").css("color", "blue")
（5）基本筛选器
（5.1）first：第一个
$(".hl~p:first").css("color", "gold")
（5.2）last：最后一个
$(".hl~p:last").css("color", "gold")
（5.3）eq(index)：指定索引序号
$(".hl~p:eq(0)").css("color", "gold")
（5.4）even：奇数行
$(".hl~p:even").css("color", "gold")
（5.5）odd：偶数行
$(".hl~p:odd").css("color", "gold")
（5.6）gt(index)：大于指定索引序号
$(".hl~p:gt(0)").css("color", "gray")
（5.7）lt(index)：小于指定索引序号
$(".hl~p:lt(2)").css("color", "gray")
（6）过滤筛选器
$(".hl~p").eq(0).css("color", "gold") //筛选任意一个.eq(index)
$(".hl~p").first().css("color", "gray") //筛选第一个.first()
$(".hl~p").last().css("color", "gray") //筛选最后一个.last()
$(".hl~p").even().css("color", "red") //筛选奇数行的标签.even()
$(".hl~p").odd().css("color", "blue") //筛选偶数行的标签.odd()
console.log($(".hl~p").hasClass("456") ) //判断标签是否有这个class属性，返回boolean值
（7）查找筛选器
//7.1只找子代元素children(selector)
$("#jquery").children("p").css("color", "blue")
//7.2找后代元素find(selector)
$("#jquery").find("p").css("color", "blue")
//7.3找下面的元素next()
$("li").next().css("color", "blue") //查找第二个及往后的li标签
$("li").eq(0).next().css("color", "blue") //查找第几个li标签的下一个的li标签
//7.4找下面的元素nextAll()
$("li").nextAll().css("color", "red") //查找第二个及往后的li标签
$("li").eq(1).nextAll().css("color", "red") //查找第几个li标签的下面所有li标签
//7.5找下面的元素nextUntil()
$("li").nextUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面除了第一个的li标签和下面所有的li标签
$("li").eq(0).nextUntil(".liend").css("color", "gold")//查找第几个li标签的下面到终止标签（不包含）的li标签
//7.6找上面面的元素prev()
$("li").prev().css("color", "blue") //查找除了最后一个的li标签
$("li").eq(2).prev().css("color", "blue") //查找第几个li标签的上一个的li标签
//7.7找上面的元素prevAll()
$("li").prevAll().css("color", "red") //查找除了最后一个的li标签
$("li").eq(3).prevAll().css("color", "red") //查找第几个li标签的上面所有li标签
//7.8找上面的元素prevUntil()
$("li").prevUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面所有的li标签和下面除了最后一个的li标签
$("li").eq(7).prevUntil(".liend").css("color", "gold")//查找第几个li标签的上面到终止标签（不包含）的li标签
//7.9查找父级标签parent
$("#parents p").parent().css("color", "red")
//7.9查找所有祖宗标签parents
$("#parents p").parents().css("color", "red")
//7.9查找区间祖辈标签parentUntil
$("#parents p").parentsUntil().css("color", "black") // 不写参数，类同parents()
$("#parents p").parentsUntil("#parents").css("color", "black") // 查找所有终止祖辈下面的祖辈标签
//7.10查找兄弟标签
$("ul").siblings().css("color", "black")
（8）练习-左侧菜单
<body><div style="clear: both">练习-左侧菜单：<br><div class="outer2"><div class="menu"><div class="item"><div class="title" onclick="f1(this)">菜单一</div><div class="con"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单二</div><div class="con hide"><div>222</div><div>222</div><div>222</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单三</div><div class="con hide"><div>333</div><div>333</div><div>333</div></div></div></div><div class="content"></div></div></div>
</body>function f1(self) {$(self).next().removeClass("hide");$(self).parent().siblings().children(".con").addClass("hide");
}
 

2.2 action() 

jQuery操作属性的方法 

（1）标签属性类
// 获取属性值
console.log($(".attr1 .a1").attr("class")) 
//设置属性值，不适用设置input标签的checked属性，因为不默认选中（手动勾选）是undefined，默认选中是cheched
$(".attr1 .a1").attr("class", "a2") 
// 删除属性
$(".attr1 .a1").removeAttr("class") 
//获取固有属性值，不适用自定义属性，因为prop找不到，获取到的是undefined，但适用input标签的checked属性，因为其值是true或false
console.log($(".attr1 .a2").prop("class")) 
// 设置固有属性值
$(".attr1 .a2").prop("class", "a3")
// 删除固有属性
$(".attr1 .a3").removeProp("class") 
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此，需要使用prop方法去操作才能获得正确的结果。
（2）css样式类
// 增加class属性列表的元素
$(".attr1 .a3").addClass("a4")
// 删除class属性列表的元素
$(".attr1 .a4").removeClass("a4")
// 设置css样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});
（3）HTML代码/文本/值 
$(".attr1 .a3").html("456<h1>123</h1>") //相当于js的innerHTML，加参数是替换原本内容
$(".attr1 .a3").text("<p>111</p>") //相当于js的innerText，加参数是替换原本内容为纯文本
$(".attr1 .a3").val() //获取标签的固有属性value，不能获取自定义属性
$(".attr1 input").val("789") // 加上参数是修改固有属性value值
（4）jQuery的循环语句
  • 方式一：

$.each(object[循环的对象，如数组], function(index[, value]){
    代码块
})

  • 方式二：

$("p").each(function(){
    代码块；//每一个标签对象是$(this)
}) 

//1.方式一：
var data={'name':"alex", age:18};
var dl=[1,"a",[12,'b'], data];
$.each(data, function(key, value){console.log("key:", key);   //循环object（字典）第一个参数值是：键keyconsole.log("value:", value);
})
$.each(data, function(key){console.log("key:", key);   //循环object（字典）如果只有一个参数值是：键key
})
$.each(dl,function(index,value){console.log("index:", index);   //循环数组第一个参数值是：索引indexconsole.log("value:", value);
})
$.each(dl,function(index){console.log("index:", index);   //循环数组如果只有一个参数值是：索引index
})
//2.方式二：
$("li").each(function(){console.log("$(this):", $(this));console.log("$(this).html():", $(this).html());
})
（5）练习-正反选
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.3.min.js"></script><script>function selectall(){$("table :checkbox").prop("checked",true)}function cancel(){$("table :checkbox").prop("checked",false)}/*js写法function reverse(){let idlist=$("table :checkbox")for(let i=0;i<idlist.length;i++){let element=idlist[i];let ischecked=$(element).prop("checked")if (ischecked){$(element).prop("checked",false)}else {$(element).prop("checked",true)}}}                *//*jQuery循环方式*/function reverse(){$("table :checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));if ($(this).prop("checked")){$(this).prop("checked",false)}else {$(this).prop("checked",true)}});}</script>
</head>
<body><button onclick="selectall();">全选</button><button onclick="cancel();">取消</button><button onclick="reverse();">反选</button><table border="1"><tr><td><input type="checkbox"></td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td></tr><tr><td><input type="checkbox"></td><td>444</td></tr></table>
</body>
</html>
（6）jQuery支持链式查找

对一个标签对象做完操作后，可以用.继续查找其他标签对象进行操作 

$("p").parent().addClass("hide");
$("p").parent().prev().addClass("hide");
// 可以合并成一行：
$("p").parent().addClass("hide").prev().addClass("hide")
 （7）练习-模态对话框
function show(self){$(self).parent().next().removeClass("hide");
}
function cancel(self){$(self).parent().parent().addClass("hide");
}
（8）文档处理 
    <div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bo").on("click", function(){//1.内部插入：父标签内插入子标签// $(".c1").append("<h1>123</h1>"); // 创建新标签方式一：直接在append（）里面写上标签内容var $ele = $("<h1></h1>"); //创建新标签方式二：相当于js中var ele=document.cerateElement("h1");var $ele = $("<h1>"); //简化写法$ele.html("hello word");$ele.css("color", "red");$(".c1").append($ele);//给父标签的子标签最后添加创建的新子标签$ele.appendTo($(".c1"));//把创建的新子标签添加到父标签的子标签最后面$(".c1").prepend($ele);//给父标签的子标签最前面添加创建的新子标签$ele.prependTo($(".c1"));//把创建的新子标签添加到父标签的子标签最前面//2.外部插入：插入兄弟标签$(".c1").after($ele);$(".c1").before($ele);$ele.insertAfter($(".c1"));$ele.insertBefore($(".c1"));//3.替换$(".c1 p").replaceWith($ele);//4.删除与清空$(".c1").empty(); //清空标签的内容，但是标签还在$(".c1").remove(); //删除标签//5.复制var $ele2=$(".c1").clone(); //clone()里写个true就不会复制事件$(".c1").after($ele2);
})
（9）练习-复制输入框
    <div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bc").click(function (){var $cloneObj=$(".lxclone .item").clone(); // 这种方式复制的数量会以2的次方倍增，因为复制出来的也是一个class属性，也会被复制var $cloneObj=$(this).parent().clone(); //应该通过这种方式复制，每次就是复制一个$cloneObj.children(".bc").html("-").attr("onclick", "removeObj(this)");$(".lxclone").append($cloneObj);
});
function removeObj(self){$(self).parent().remove();
}

3、css操作

<div class="cssop">CSS操作<p id="ys">1.样式</p><div id="offsetdiv">2.位置<div class="div1">2.1-offset相对视口偏移量</div><div class="div2">2.2-position相对已定位父级偏移量</div></div><div class="gotop hide" style="position: fixed;right: 20px;bottom: 20px;width: 90px;height: 50px;background-color: gray; color:white;text-align: center;line-height: 50px">返回顶部</div><ul><li>111</li><li>222</li><li>333</li></ul>
</div>

3.1 样式

$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});

 3.2 位置

//2.位置
$("*").css({"padding":"0px", "margin":"0px"});
$("#offsetdiv").css({position:"relative"});
$("#offsetdiv .div1").css({width: "200px", height: "200px", "background-color":"blue"});
$("#offsetdiv .div2").css({width: "200px", height: "200px", margin:"20px", padding:"20px", border:"1px solid red", "background-color":"green"});
//2.1-1offset()得到的是偏移量对象，有top和left两个属性：是相对于视口（窗口）的偏移量
console.log($("#offsetdiv .div1").offset().top)
console.log($("#offsetdiv .div1").offset().left)
console.log($("#offsetdiv .div2").offset().top)
console.log($("#offsetdiv .div2").offset().left)
//2.2-position()得到的是偏移量对象，有top和left两个属性：是相对于已定位的父级标签的偏移量
console.log($("#offsetdiv .div1").position().top)
console.log($("#offsetdiv .div1").position().left)
console.log($("#offsetdiv .div2").position().top)
console.log($("#offsetdiv .div2").position().left)
//2.3-scrollTop放在监听事件才有效
//练习-返回顶部
window.onscroll=function(){if($(window).scrollTop()>100){ //窗口滚动滑轮距离顶部的距离$(".gotop").removeClass("hide")} else {$(".gotop").addClass("hide")}
}
$(".gotop").click(function(){$(window).scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//练习-对标签元素应用scrollTop
// var $btEle=$("<button>");
// $btEle.html("回顶部")
// $btEle.addClass("aftb hide")
// $("#offsetdiv .div2").after($btEle);
$("#offsetdiv .div2").after("<button class='aftb hide'>回顶部</button>");
$("#offsetdiv .div2").html("<h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1>")
$("#offsetdiv .div2").css("overflow", "auto");
$("#offsetdiv .div2").scroll(function (){if($(this).scrollTop()>0){ //窗口滚动滑轮距离顶部的距离$(".aftb").removeClass("hide")} else {$(".aftb").addClass("hide")}
});
$(".aftb").click(function(){$("#offsetdiv .div2").scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//2.4-scrollLeft放在监听事件才有效,（左右滑轮，类似上下滑轮）

3.3 尺寸

console.log($("#offsetdiv .div2").height()) // 获取内容的高度
$("#offsetdiv .div2").height("300px") // 修改内容的高度
console.log($("#offsetdiv .div2").innerHeight()) // 获取内容+内边距padding的高度
console.log($("#offsetdiv .div2").outerHeight()) // 获取内容+内边距padding+边框border的高度
console.log($("#offsetdiv .div2").outerHeight(true)) // 获取内容+内边距padding+边框border+外边距margin的高度
console.log($("#offsetdiv .div2").width()) // 获取内容的宽度
$("#offsetdiv .div2").width("300px") // 修改内容的宽度
console.log($("#offsetdiv .div2").innerWidth()) // 获取内容+内边距padding的宽度
console.log($("#offsetdiv .div2").outerWidth()) // 获取内容+内边距padding+边框border的宽度
console.log($("#offsetdiv .div2").outerWidth(true)) // 获取内容+内边距padding+边框border+外边距margin的宽度

3.4 索引

$("ul li").index(); //获取标签集合的索引

http://www.ppmy.cn/ops/155648.html

相关文章

在AWS上使用Flume搜集分布在不同EC2实例上的应用程序日志具体流程和代码

在AWS上使用Flume搜集分布在不同EC2实例上的应用程序日志具体流程和代码

在AWS上使用Flume搜集日志的一个典型应用案例涉及将分布在不同EC2实例上的应用程序日志实时收集并集中存储到Amazon S3或Amazon HDFS&#xff08;如果已部署&#xff09;中&#xff0c;以供后续分析和处理。以下是该案例的详细步骤&#xff1a; 环境准备 • 确保在AWS上有一组…
阅读更多...
Java篇之继承

Java篇之继承

目录 一. 继承 1. 为什么需要继承 2. 继承的概念 3. 继承的语法 4. 访问父类成员 4.1 子类中访问父类的成员变量 4.2 子类中访问父类的成员方法 5. super关键字 6. super和this关键字 7. 子类构造方法 8. 代码块的执行顺序 9. protected访问修饰限定符 10. 继承方式…
阅读更多...
数据的添加、更新与删除

数据的添加、更新与删除

一&#xff0c;添加数据 INSERT INTO 表名 VALUES(); 存在两种书写形式&#xff1a; &#xff08;1&#xff09;自主填写 自主填写的形式&#xff1a; ①根据创建表的字段结构&#xff0c;依次填入数据。 ②填入数据时&#xff0c;自己指明字段结构&#xff0c;依据就近…
阅读更多...
【数据结构】_链表经典算法OJ：链表判环问题

【数据结构】_链表经典算法OJ：链表判环问题

目录 1. 题目1&#xff1a;环形链表判环是否存在 1.1 题目链接及描述 1.2 解题思路 1.3 程序 2. 关于快慢指针的追击问题 2.1 试分析快指针步长为2的可行性&#xff1f; 2.2 试分析快指针步长为3的可行性&#xff1f; 3. 题目2&#xff1a;环形链表判环是否存在并返回入…
阅读更多...
【Validator】自定义字段、结构体补充及自定义验证，go案例讲解ReportError和errors.As在其中的使用

【Validator】自定义字段、结构体补充及自定义验证，go案例讲解ReportError和errors.As在其中的使用

自定义字段名称的显示 RegisterTagNameFunc&#xff0c;自定义字段名称的显示&#xff0c;以便于从字段标签&#xff08;tag&#xff09;中提取更有意义的名称。 代码示例&#xff1a;自定义字段名称 package mainimport ("fmt""reflect""strings&q…
阅读更多...
网络安全攻防实战：从基础防护到高级对抗

网络安全攻防实战：从基础防护到高级对抗

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 引言 在信息化时代&#xff0c;网络安全已经成为企业、政府和个人必须重视的问题。从数据泄露到勒索软件攻击&#xff0c;每一次…
阅读更多...
实验六 项目二 简易信号发生器的设计与实现 （HEU）

实验六 项目二 简易信号发生器的设计与实现 （HEU）

声明&#xff1a;代码部分使用了AI工具 实验六 综合考核 Quartus 18.0 FPGA 5CSXFC6D6F31C6N 1. 实验项目 要求利用硬件描述语言Verilog&#xff08;或VHDL&#xff09;、图形描述方式、IP核&#xff0c;结合数字系统设计方法&#xff0c;在Quartus开发环境下&#xff…
阅读更多...
Word List 2

Word List 2

词汇颜色标识解释 词汇表中的生词 词汇表中的词组成的搭配、派生词 例句中的生词 我自己写的生词&#xff08;用于区分易混淆的词&#xff0c;无颜色标识&#xff09; 不认识的单词或句式 单词的主要汉语意思 不太理解的句子语法和结构 Word List 2 英文音标中文regi…
阅读更多...
最新文章

Copyright @ 2022~2023