jQuery快速入门（二）

news/2024/7/10 22:59:50 标签: jquery, 前端, javascript

jQuery

筛选器方法

下一个元素：

javascript">$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：

javascript">$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

javascript">$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

javascript">$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

javascript">$("div").find("p")----------------->等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

javascript">$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充：

javascript">.first() // 获取匹配的第一个元素
  	$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素
      $('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
      $('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
javascript">document.getElementById()------>标签对象------------>直接就是标签
$(document.getElementById()) -------> jQuery对象-------->可以使用jQuery提供的方法
jQuery(document.getElementById()) -------> jQuery对象-------->可以使用jQuery提供的方法
$ === jQuery
# 如何把jQuery对象转为标签对象
$()[0]

$("#id")===jQuery("#id")

操作标签

样式操作

样式类

javascript">addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

CSS样式

javascript">$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置操作

javascript">offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

尺寸：

javascript">height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

HTML代码：

javascript">html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：

javascript">text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：

javascript">val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

获取被选中的checkbox或radio的值：

javascript">console.log($("input[name='gender']:checked").val());

属性操作

用于ID等或自定义属性：

javascript">attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

javascript">prop() // 获取属性
removeProp() // 移除属性

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

总结一下：

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

添加到指定元素内部的后面

javascript">let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')          
$('#d1').append($pEle)  # 内部尾部追加

createElement('p') ----------->		$('<p>')
appendChild()			 ----------->	append()

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

javascript">$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

javascript">$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

javascript">$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

javascript">remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

事件

常用事件

javascript">click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控	
$(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })

事件绑定

  1. .on( events [, selector ],function(){})
  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

移除事件

  1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

阻止后续事件执行

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

补充

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

javascript">li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

010
120
230
340

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

javascript">// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

javascript">$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

javascript">$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

javascript">$("div").removeData("k");  //移除元素上存放k对应的数据


http://www.niftyadmin.cn/n/5156648.html

相关文章

wsl 安装

wsl 安装

wsl 安装 https://blog.csdn.net/Shi_zhaopeng/article/details/130094409
阅读更多...
Android Studio代码无法自动补全

Android Studio代码无法自动补全

Android Studio代码自动无法补全问题解决 在写layout布局文件时&#xff0c;代码不提示&#xff0c;不自动补全&#xff0c;可以采用如下方法&#xff1a; 点击File—>Project Structure&#xff0c;之后如图所示&#xff0c;找到左侧Modules&#xff0c;修改SDK版本号&…
阅读更多...
原语：串并转换器

原语：串并转换器

串并转换器OSERDESE2 可被Select IO IP核调用。 OSERDESE2允许DDR功能 参考&#xff1a; FPGA原语学习与整理第二弹&#xff0c;OSERDESE2串并转换器 - 知乎 (zhihu.com) 正点原子。 ISERDESE2原语和OSERDESE2原语是串并转换器&#xff0c;他的的功能都是实现串行数据和并行…
阅读更多...
【系统集成项目管理工程师】——6.习题一

【系统集成项目管理工程师】——6.习题一

1.&#xff08;&#xff09; 通过独立的、对网络行为和主机操作提供全面与忠实的记录&#xff0c;方便用户分析与审查事故原因&#xff0c;很像飞机上的黑匣子 A、防火墙&#xff1b;B、扫描器&#xff1b;C、防毒软件&#xff1b;D、安全审计系统 答案&#xff1a;D 2.《GB/…
阅读更多...
宠物养成猫狗商城门店问诊档案流量主小程序开发

宠物养成猫狗商城门店问诊档案流量主小程序开发

宠物养成猫狗商城门店问诊档案流量主小程序开发 猫狗宠物养成商城门店问诊档案流量主小程序开发&#xff0c;这是一个充满趣味性和创新性的项目。通过将宠物养成游戏与商城、问诊服务、社交功能等相结合&#xff0c;为用户提供一站式的宠物养育体验。 在宠物养成方面&#x…
阅读更多...
带你一文搞懂 Linux 网络 Phy 驱动

带你一文搞懂 Linux 网络 Phy 驱动

概述 上图来自 瑞昱半导体 (RealTek) 的 RTL8201F 系列网卡 PHY 芯片手册。按OSI 7层网络模型划分&#xff0c;网卡PHY 芯片(图中的RTL8201F)位于物理层&#xff0c;对应的软件层就是本文讨论的 PHY 驱动层&#xff1b;而 MAC 位于 数据链路层&#xff0c;也是通常软件上所说的…
阅读更多...
ZZ308 物联网应用与服务赛题第A套

ZZ308 物联网应用与服务赛题第A套

2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 &#xff08;A卷&#xff09; 赛位号&#xff1a;______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等&#xff1b; 2.竞赛任务中所使用的…
阅读更多...
文学知识记录

文学知识记录

2020.2.19 管仲&#xff08;约公元前723年&#xff0d;公元前645年&#xff09;&#xff0c;姬姓&#xff0c;管氏&#xff0c;名夷吾&#xff0c;字仲&#xff0c;谥敬&#xff0c;颍上&#xff08;今安徽颍上县&#xff09;人。中国古代著名的经济学家、哲学家、政治家、军事…
阅读更多...
最新文章

Copyright @ 2022~2023