【jQuery超快速入门教程】上篇

简介: 【jQuery超快速入门教程】上篇

1️⃣前言:jQuery必备网站

jQuery下载地址 jQuery中文文档 jQuery插件库

1️⃣一、为什么要学习jQuery?

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

1️⃣二、jQuery的基础语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $( selector ). action ()**

**

1️⃣三、jQuery基本选择器

2️⃣3.1、id选择器

选择id="d1"的标签

$("#d1")

2️⃣3.2、标签选择器

选择文档中所有的p标签

$("P")

2️⃣3.3、class选择器

$(".className")

2️⃣3.4、配合使用

选择class="d1"的div标签

${"div.d1")

2️⃣3.5、组合选择器

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

2️⃣3.6、所有元素选择器

$("*")

2️⃣3.7、层级选择器

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

2️⃣3.8、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]")         选取所有带有 href 属性的元素。
$("[href='#']")     选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")    选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

2️⃣3.9、CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

$("p").css("background-color","red");

1️⃣四、jQuery筛选器

2️⃣4.1、基本筛选器

$(":has(元素选择器)") | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

举几个栗子:

1、找到后代中含有h1标签的div标签
>>>$("div:has(h1)")
2、找到所有后代中不含a标签的div标签
>>>$("div:not(:has(a))")

2️⃣4.2、表单筛选器

·当我们要取到checkbox类型的input标签:

我们可以用上面学过的方法:

$("input[type='checkbox']")


但是这种方法还是书写比较麻烦,不太符合jQuery的“Write less, do more.“

所以可以简化成如下代码:

$(":checkbox")


常用的表单筛选器还有如下:

:button 匹配所有按钮。例如:$(":button")

·:checkbox 匹配所有复选框。例如:$(":checkbox")

·:file 匹配所有文件域。例如:$(":File")

·:hidden 匹配所有不可见元素,或者type为hidden的元素。例如:$("input:hidden")

·:image 匹配所有图像域。例如:$(":image")

·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")

·:password 匹配所有密码框。例如:$(":password")

·:radio 匹配所有单选按钮。例如:$(":radio")

·:reset 匹配所有重置按钮。例如:$(":reset")

·:submit 匹配所有提交按钮。例如:$(":submit")

·:text 匹配所有的单行文本框。例如:$(":text")

·:header 匹配如 h1, h2, h3之类的标题元素。例如:$(":header").css("background", "#EEE");

常见的表单对象属性还有:

2️⃣4.3、筛选器的常用方法

3️⃣4.3.1、上一个元素

$("#id").prev()            找到对应id值的上一个元素
$("#id").prevAll()         找到对应id值上面的所有元素
$("#id").prevUntil("#i2")  找到对应id值上面的所有元素直到id值为i2(不包括i2本身)

3️⃣4.3.2、下一个元素

$("#id").next()            解释同上
$("#id").nextAll()
$("#id").nextUntil("#i2")

3️⃣4.3.3、父亲元素

$("#id").parent()
$("#id").parents()       查找当前元素的所有的父辈元素
$("#id").parentsUntil("#i2")  查找当前元素的所有的父辈元素,直到遇到id为i2为止(不包括i2本身)。

3️⃣4.3.4、儿子和兄弟元素

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

3️⃣4.3.5、查找

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

例如:查找div标签下的p标签(等价于 $("div p")

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

3️⃣4.3.6、总结

这里我引用了jQuery 参考手册 - DOM 元素方法 (w3school.com.cn)来进行详细总结和补充

这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。

方法 描述
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素之后插入内容。
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo() 向目标结尾插入匹配元素集合中的每个元素。
attr() 设置或返回匹配元素的属性和值。
before() 在每个匹配的元素之前插入内容。
clone() 创建匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中所有的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo() 向目标开头插入匹配元素集合中的每个元素。
remove() 移除所有匹配的元素。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
val() 设置或返回匹配元素的值。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。














相关文章
|
7月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
83 0
|
6月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
67 1
|
6月前
|
JavaScript 前端开发 开发者
jQuery 下载与快速入门指南
jQuery 下载与快速入门指南
286 0
|
7月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
49 0
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
69 0
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
设计模式 JavaScript 前端开发
|
JavaScript 前端开发 API
JavaWeb快速入门--jQuery
JavaWeb快速入门--jQuery
75 0
|
JavaScript 索引
JavaWeb--快速入门jQuery(三)
JavaWeb--快速入门jQuery(三)
136 0
JavaWeb--快速入门jQuery(三)