jQuery 相关内容-选择器

JQuery基础相关内容一文通

JQuery简介

• JQuery是轻量级的js类库，jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。

• jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

JQuery的语法

• JQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是$(谁).干什么：$(selector).action()
  • 美元符号定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏第一个 id="test" 的元素

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

jQuery的事件绑定

1.给某个元素绑定单一事件

$(..).click(
// 函数
);

2.给某个元素绑定多个事件

$(...).on({
// "事件名1":函数1,
// "事件名2":函数2,
// "事件名3":函数3.......
})

文档加载函数 & 文档就绪函数

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败

语法

$(document).ready(function(){
   --- jQuery functions go here ----
});

或者是

$(function(){
   --- jQuery functions go here ----
});

JQuery常用选择器

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

选择器实例

这是一部分，后续持续更新

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	所有 class=“intro” 的元素
element	$(“p”)	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class=“intro” 且 class=“demo” 的元素
:first	$(“p:first”)	第一个 <p> 元素
:last	$(“p:last”)	最后一个 <p> 元素
:even	$(“tr:even”)	所有偶数 <tr> 元素
:odd	$(“tr:odd”)	所有奇数 <tr> 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“p:not(:empty)”)	所有不为空的 input 元素,使用中注意只能能使用在双标签上
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated	所有动画元素
:contains(text)	$(“p:contains(‘W3School’)”)	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的 <p> 元素
:visible	$(“table:visible”)	所有可见的表格
s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素
[attribute=value]	$("[href=’#’]")	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	$("[href!=’#’]")	所有 href 属性的值不等于 “#” 的元素
:input	$(":input")	所有 <input> 元素
:password	$(":password")	所有 type=“password” 的 <input> 元素
:radio	$(":radio")	所有 type=“radio” 的 <input> 元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的 <input> 元素
:submit	$(":submit")	所有 type=“submit” 的 <input> 元素
:reset	$(":reset")	所有 type=“reset” 的 <input> 元素
:button	$(":button")	所有 type=“button” 的 <input> 元素
:image	$(":image")	所有
:file	$(":file")	所有 type=“file” 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

操作选中元素的属性

jQuery 属性操作方法
下面列出的这些方法获得或设置元素的 DOM 属性。这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。

元素的筛选

函数	描述
.first()	将匹配元素集合缩减为集合中的第一个元素。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。

文档的处理

函数	描述
after()	在匹配的元素之后插入内容。
append()	向匹配的元素内部追加内容。
appendTo()	把所有匹配的元素追加到另一个指定的元素元素集合中。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向每个匹配的元素内部前置内容。
prependTo()	把所有匹配的元素前置到另一个、指定的元素元素集合中。
remove()	移除所有匹配的元素。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	将所有匹配的元素替换成指定的HTML或DOM元素。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapInner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
unwrap()	移除指定元素的父元素。

JQuery常用特效方法

方法	说明
show([speed,[easing],[fn]])	显示隐藏的匹配元素
hide([speed,[easing],[fn]])	隐藏显示的元素
slideDown([speed],[easing],[fn])	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp([speed,[easing],[fn]])	通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
fadeIn([speed],[easing],[fn])	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut([speed],[easing],[fn])	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
animate(params,[speed],[easing],[fn])	用于创建自定义动画的函数。
stop([clearQueue],[jumpToEnd])	停止所有在指定元素上正在运行的动画。

JQuery事件语法

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

触发实例

$("button#demo").click()

上面的例子将触发 id=“demo” 的 button 元素的 click 事件

绑定实例

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id=“demo” 的按钮时隐藏所有图像

JQuery常用事件绑定

事件	使用方法
click(fn)	鼠标单击事件
mouseover(fn)	鼠标经过事件
mouseout(fn)	鼠标离开事件
change(fn)	值改变事件
focus(fn)	焦点事件
scroll(fn)	当滚动条发生变化时触发
toggle(fn,fn,…)	点击事件的切换
hover(fn,fn)	鼠标经过离开的切换
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数
unbind(type,[data	fn])

相关实例

关于选择器基础内容相关实例

1. 关于得到页面上的全部信息

html 页面代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="text-div">
      <ul>
        <li class="text-li">1</li>
        <li class="text-li">2</li>
        <li class="text-li">3</li>
        <li class="text-li">4</li>
        <li class="text-li">5</li>
        <li class="text-li">6</li>
        <li class="text-li">7</li>
        <li class="text-li">8</li>
        <li class="text-li">9</li>
        <li class="text-li">10</li>
        <li class="text-li">11</li>
        <li class="text-li">12</li>
        <li class="text-li">13</li>
        <li class="text-li">14</li>
        <li class="text-li">15</li>
        <li class="text-li">16</li>
        <li class="text-li">17</li>
        <li class="text-li">18</li>
        <li class="text-1">19</li>
        <li class="text-li">20</li>
        <li class="text-li">21</li>
        <li class="text-li">22</li>
        <li class="text-li">23</li>
      </ul>
    </div>
  </body>
  <script src="../js/core-js/jquery-3.6.0.min.js"></script>
  <script src="../js/assert/select-project.js"></script>
</html>

javascript代码如下

/**
 * 当单机 class = button 的表单元素时候 隐藏页面信息
 */
$('.buttion-class').on('click', (e) => {
    console.log($('*').hide(2000));
})

2. xpath 和 jq 的类 & id 选择器相关内容

html 页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="buttion-class">点击我</button>
    <!-- <buttion >点击</buttion> -->
    <ul>
        <li class="li-class">1</li>
        <li class="li-class">2</li>
        <li class="li-class">3</li>
        <li class="li-class">4</li>
        <li class="li-class">5</li>
        <li class="li-class">6</li>
        <li class="li-class">7</li>
        <li class="li-class">8</li>
        <li class="li-class">9</li>
        <li class="li-class">10</li>
        <li class="li-class">11</li>
        <li class="li-class">12</li>
    </ul>
</body>
<script src="../js/core-js/jquery-3.6.0.min.js"></script>
<script src="../js/assert/select-id-demo-projrcct.js"></script>
</html>

javascript 页面代码如下

/**
 * css 写法:适用于较为简单的界面结构
 */
($('div.text-div')); //在页面中查找div标签且class="text-div"的标签对象
($('div.text-div li.text-li')); //在页面中查找 class 为 text-div 的 div 对象中的的 class="text-li" 的 li 标签对象
/**
 *:last 表示最后一个元素
 *：first 表示第一个元素
 *:even 表示偶数个数的元素 
 :odd 表示奇数个数的元素个数
*/
($('div.text-div li.text-li:first').html()); //在页面中查找 class 为 text-div 的 div 对象中的的 class="text-li" 的 li 的第一个标签元素， 


/**
 * xpath 写法: 适用于较为复杂的界面结构
 */
($('div[class="text-div"]')); //*div[@class="text-div"]
($('div[class="text-div"] li[class="text-li"]')); //*div[@class="text-div"]//li[@class="text-li"]
($("div[class='text-div'] li[class!='text-li']")); //*div[@class="text-div"]//li[@class!='text-li']

/**
 * xpath+css的写法 & 混合查找元素对象
 * 适用于较为复杂的界面结构
 */
($('div.text-div li[class!="text-li"]')); 

/**
 * ----------------------------------------------------------------
 * 信息的隐藏
 * jQuery fadeOut() 方法用于淡出可见元素。
 * 可选的 speed 参数规定效果的时长。它可以取以下"slow"、"fast" 或毫秒。
 * 可选的 callback 参数是 fading 完成后所执行的函数名称。 
 * 
 * jQuery fadeIn() 用于淡入已隐藏的元素
 * jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
 * jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
 * ----------------------------------------------------------------
 * hide 隐藏元素信息 改变
 * 隐藏的元素不会被完全显示（不再影响页面的布局）。
 * 如需显示隐藏的元素，请查看 show() 方法。
 * ----------------------------------------------------------------
 * 
 */
 $('div.text-div li[class!="text-li"]').hide(5000,()=>{
     alert('隐藏函数执行完成');
 })

3. 修改数据的相关操作

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>新浪</h1>
    <input type="button" value="改变层级样式">
    <br><br>
    <div class="spring">
        <input value="春" readonly>
    <input value="夏" readonly>
    <input value="秋" readonly>
    <input value="冬" readonly>
    </div>
    <br><br>
    <input type="button" value="改变innput内容">
</body>
<script src="../js/core-js/jquery-3.6.0.min.js"></script>
<script src="../js/assert/p17.js"></script>
</html>

javascript 代码如下

/**
 * 改变 h1 标签的值
 */
$('input[value="改变层级样式"]').click(function (e) { 
    var getobject = $('h1');
    if (getobject.html()=="新浪") {
        getobject.html("搜狐");
    } else {
        getobject.html("新浪");
    }    
});


/**
 * 隐藏除去春之外的所有元素的input
 */
$('input[value="改变innput内容"]').click(function (e) { 
    $('div.spring input[value!="春"]').fadeOut();
    $('div.spring input[value="春"]').fadeIn();
});

表单相关的相关操作

相关补充

Xpath 语法教程

HTML5+CSS3 语法教程

js教程