04.jQuery 基本语法笔记

 

jQuery是什么

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

jQuery引入到HTML

在HTML的body内,底部引入文件jquery-3.2.1.min.js

<script src="jquery-3.2.1.min.js"></script>
<script>$("#b1").on("click", function () {$(".c1").offset({left: 200, top:200});});$(window).scroll(function () {if ($(window).scrollTop() > 100) {$("#b2").removeClass("hide");}else {$("#b2").addClass("hide");}});$("#b2").on("click", function () {$(window).scrollTop(0);})
</script>

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。

$("#i1").html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于: document.getElementById("i1").innerHTML;

 

一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例,jQuery对象和DOM对象的使用:

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

 

jQuery基础语法

$(selector).action()

 

查找标签

基本选择器

id选择器:

$("#id")

标签选择器:

$("tagName")

class选择器:

$(".className")

配合使用:

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器:

$("*")

组合选择器:

$("#id, .className, tagName")

层级选择器:

x和y可以为任意选择器

$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器:

 

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

 

例子:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器:

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子:

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器:

:text
:password
:file
:radio
:checkbox:submit
:reset
:button

 

例子:

$(":checkbox")  // 找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected

例子:

找到可用的input标签

<form><input name="email" disabled="disabled" /><input name="id" />
</form>$("input:enabled")  // 找到可用的input标签

 找到被选中的option:

 

<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">广州市</option><option value="shenzhen">深圳市</option>
</select>$(":selected")  // 找到所有被选中的option

 

筛选器方法

下一个元素:

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

上一个元素:

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

父亲元素:

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

儿子和兄弟元素:

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

查找

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

$("div").find("p")

等价于$("div p")

筛选

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

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

等价于 $("div.c1")

补充:

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

操作标签

样式操作

样式类

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

示例:开关灯和模态框

CSS

css("color","red")//DOM操作:tag.style.color="red"

示例:

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

位置操作

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

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

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

 

尺寸:

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

HTML代码:

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

文本值:

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

值:

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

例如:

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球<select multiple id="s1"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
</select>

设置值:

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

示例:

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

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用:

$("input[name='gender']:checked").val()

属性操作

用于ID等或自定义属性:

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

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

注意:

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别:

attr全称attribute(属性) 

prop全称property(属性)

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

举个例子:

<input type="checkbox" id="i1" value="1">

针对上面的代码,

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

如果换成下面的代码:

<input type="checkbox" checked id="i1" value="1">

再执行:

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。

接下来再看一下针对自定义属性,attr和prop又有什么区别:

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行以下代码:

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

可以看到prop不支持获取标签的自定义属性。

总结一下:

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

 

文档处理

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

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

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

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

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

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

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

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

移除和清空元素

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

例子:

点击按钮在表格添加一行数据。

点击每一行的删除按钮删除当前行数据。

替换

replaceWith()
replaceAll()

克隆

clone()// 参数

 

摘抄自:https://www.cnblogs.com/liwenzhou/p/8178806.html

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280955.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1. ReactJS基础(开发环境搭建)

本文主要介绍通过React官方提供的create-react-app脚手架进行开发环境的搭建。 1.安装node环境(安装过程这里不做介绍&#xff0c;可参考其他博文) 在cmd中输入node -v 如果可以看到相应版本号&#xff0c;说明node环境安装成功 2.npm全局安装create-react-app脚手架 3.cmd命令…

软件工程(2018)第一次作业

(1) 回顾你过去将近3年的学习经历 当初你报考的时候&#xff0c;是真正喜欢计算机这个专业吗&#xff1f; 在高中的时候&#xff0c;我们就开设了微机课&#xff0c;当时上课的内容不仅有Microsoft word,excel,powerpoint的使用&#xff0c;还有编程的基本入门&#xff0c;当时…

“云计算+DevOps”的正确打开方式

以我们的经验看&#xff0c;技术和工具是很重要&#xff0c;但是技术和工具本身却不能产生价值&#xff0c;而将DevOps和云计算结合却可以。事实上&#xff0c;云计算的特性决定了&#xff0c;云计算和DevOps势必如影随形&#xff0c;而云计算与DevOps的结合也正在为企业用户提…

微服务和分布式系统中的授权解决方案

本文是 《精读 Mastering ABP Framework》 2.3 探索横切关注点 - 使用授权和权限系统 一节的扩充内容&#xff0c;重点探讨了授权在分布式和微服务系统中遇到的挑战&#xff0c;以及 ABP Framework 中采用的解决方案。认证 & 授权• 认证&#xff08;Authentication&#x…

pat 团体天梯赛 L2-012. 关于堆的判断

L2-012. 关于堆的判断 时间限制400 ms内存限制65536 kB代码长度限制8000 B判题程序Standard作者陈越将一系列给定数字顺序插入一个初始为空的小顶堆H[]。随后判断一系列相关命题是否为真。命题分下列几种&#xff1a; “x is the root”&#xff1a;x是根结点&#xff1b;“x a…

04-1.jQuery事件与补充each/data

目录 事件 事件绑定 常用事件 阻止后续事件执行 补充 each .data() 事件 事件绑定 .on( events [, selector ],function(){}) events&#xff1a; 事件selector: 选择器&#xff08;可选的&#xff09;function: 事件处理函数 普通绑定&#xff0c;没有选择器&#x…

【刷出存在感】锋会圆桌现场

【编者按】本文为锋会|路由器专场的圆桌全文&#xff08;有删减&#xff09;。 圆桌嘉宾&#xff1a;&#xff08;自左向右依次&#xff09; 极路由联合创始人 丁衣 知道创宇研究部总监&#xff08;安全专家&#xff09; 余弦 WRTnode创始人&#xff08;开源硬件领域&#xff0…

如何从命令行浏览和连接到无线网络

() We are always on the lookout for geeky ways to impress our friends, and recently we came across a way to connect to our wireless network from the command prompt, so today we’ll show you how to do it as well. 我们一直在寻找令人印象深刻的方式来打动我们的…

html 基础之canvas 和 localStorage

1&#xff0c;建立一个canvas 画布&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <meta name"viewport" content"widthdevice-width, initial-scale1.0">…

国产数据助力金融行业维护信息安全

金融信息系统作为国家关键信息基础设施&#xff0c;直接关系到国家经济、社会的正常运行。长期以来&#xff0c;我国金融信息化依赖进口设备和系统&#xff0c;金融行业尤其是银行业被IBM、HP、甲骨文等外商捆绑较深&#xff0c;金融行业信息化设备的软硬件系统被外商垄断。这等…

mysql查询优化以及面试小结

mysql面试小结&#xff1a; 1.mysql的基本架构 2.mysql的索引 btree的原理 3.mysql的索引优化 4.mysql的sql查询优化 慢查询日志 Show prodile 全局查询日志 5.mysql的主从复制 6.mysql的锁机制 表锁 行锁转载于:https://www.cnblogs.com/daiwei1981/p/10224934.html

05.Bootstrap导入基础笔记

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局&#xff0c;并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap&#xff1f; 在Bootstrap出现之前&…

etcd v3 集群——简单配置

2019独角兽企业重金招聘Python工程师标准>>> 一、etcd v3安装&#xff1a; tar -axf etcd-v3.2.0-linux-amd64.tar.gz -C /usr/local/src/chmod ax /usr/local/src/etcd-v3.2.0-linux-amd64/etcd*cp -a /usr/local/src/etcd-v3.2.0-linux-amd64/etcd* /usr/local/bi…

windows变量延迟_Windows 10的2018年10月更新可能推迟到11月(这就是原因)

windows变量延迟Microsoft stopped offering Windows 10’s October 2018 Update on October 6, as it was deleting some people’s files. Now, another ugly data loss bug has reared its head, and it won’t be fixed until November. 微软于10月6日停止提供Windows 10的…

rest-framework-权限组件

rest-framework-权限组件 一 权限简介 只用超级用户才能访问指定的数据&#xff0c;普通用户不能访问&#xff0c;所以就要有权限组件对其限制 二 局部使用 from rest_framework.permissions import BasePermission class UserPermission(BasePermission):message 不是超级用户…

linux服务器上如何显示工作路径

1. 修改PS环境变量 [rootlinux-node01 ~]# vi /etc/bashrc [ "$PS1" "\\s-\\v\\\$ " ] && PS1"[\u\h \W]\\$ "将PS1"[\u\h \W]\\$ "修改成PS1"[\u\h \w]\\$ " 2. 重新打开一个窗口 [rootlinux-node01 ~]# cd /etc…

MySQL-01:下载安装配置及初始化命令

目录 1、下载 2、解压 3、初始化 4、启动MySQL服务 5、连接MySQL服务 6、快捷设置 a. 添加环境变量 b. 将MySQL服务制作成windows服务 1、下载 下载压缩包&#xff0c;非安装包 下载网址&#xff1a; http://dev.mysql.com/downloads/mysql/ 2、解压 选择解压目录&…

根据MediatR的Contract Messages自动生成Minimal WebApi接口

大家好&#xff0c;我是失业在家&#xff0c;正在找工作的博主Jerry。今天给大家介绍一个能大大减少ASP.Net Minimal WebApi编码量的方法。我们一般会把微服务的VO和DTO封装成消息类&#xff0c;并作为WebApi的Request和Response参数进行网络传递。如果使用MediatR&#xff0c;…

bupt summer training for 16 #8 ——字符串处理

https://vjudge.net/contest/175596#overview A.设第i次出现的位置左右端点分别为Li&#xff0c;Ri 初始化L0 0&#xff0c;则有ans sum{ (L[i] - L[i-1]) * (n 1 - Ri) } 1 #include <cstdio>2 #include <cstring>3 #include <iostream>4 #include <a…

程序员必须知道的HTML常用代码有哪些?

HTML即超文本标记语言&#xff0c;是目前应用最为广泛的语言之一&#xff0c;是组成一个网页的主要语言。在现今这个HTML5华丽丽地占领了整个互联网的时候&#xff0c;如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的&#xff0c;程序猿们需要掌握一些必须知道的HTML常用…