JQuery 获取元素和选择器用法以及属性的介绍

2021年04月04日 13:33 · 阅读 349

选择器用法

选择器	实例	选取
*	$("*")	所有元素
#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)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 `<h1> - <h6>`
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 `<p>` 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$ ='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 `<input>` 元素
:text	$(":text")	所有 type="text" 的 `<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")	所有 type="image" 的 `<input>` 元素
:file	$(":file")	所有 type="file" 的 `<input>` 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

$("#id属性") id选择器

选择某个id的元素，具有唯一性

$(function () {
  $("#btn").click(function () {
  });
});
复制代码

$(".类名") 类选择器

选择某个或者是多个元素

$(".cls").css("backgroundColor", "yellow");
$(".cls").css("border", "1px solid red");

//设置某个元素的css样式属性值
.css("属性","值")
复制代码

$("标签名字") 标签选择器

多个元素或者是某个元素

//页面加载的事件
$(function () {
  //根据id选择器获取按钮,添加点击事件
  $("#btn").click(function () {
    //根据标签选择器获取p标签
    $("p").text("我们都是p标签");
  });
});

.text()方法相当于DOM中的.innerText属性
对象.text() -> 获取该元素的文本内容
对象.text("值") -> 设置该元素的文本内容
复制代码

⚠️注意: 本身代码没有循环操作，jQuery中内部帮助我们循环操作的 -> 隐式迭代

$(标签名.类样式的名字) 交集选择器（标签+类选择器）

$(function () {
  $("#btn").click(function () {
    $("p.cls").css("backgroundColor", "green");
  });
});
复制代码

$(选择器,选择器..) 并集选择器（多条件选择器）

$(function () {
  $("#btn").click(function () {
    $("#dv,p,.cls").css("backgroundColor", "orange");
  });
});
复制代码

层次选择器（后代选择器）

$("A B") 后代选择器        //选择A元素内部的所有B元素 
$("A > B") 子选择器       //选择A元素内部的所有B子元素
$("#A~B") 后面的全部元素   //获取的是A这个父级元素后面的所有的兄弟元素（B）
$("#A+B") 下一个元素      //获取的是div后面直接的兄弟元素


$("#btn").click(function () {
  // 获取的是div这个父级元素中所有span标签(直接的子元素,孙子元素)
  $("#div span").css("backgroundColor","red");

  // 获取的是div这个父级元素中直接的子元素
  $("#div>span").css("backgroundColor","red");

  // 获取的是div这个父级元素后面的所有的兄弟元素---span
  $("#div~span").css("backgroundColor","red");

  // 获取的是div后面直接的兄弟元素
  $("#div+span").css("backgroundColor","red");
});
复制代码

属性选择器

$("A[属性名]")  属性名称选择器     //包含指定属性的选择器
$("A[属性名='值']") 属性值选择器   //包含指定属性等于指定值的选择器
$("A[属性名='值'][]...") 复合属性选择器 //包含多个属性条件的选择器
复制代码

过滤选择器（筛选器）

$("选择器:first")          首元素选择器    //多元素集合的第一个元素
$("选择器:last")           尾元素选择器    //多元素集合的最后一个元素
$("选择器:odd")            奇数选择器
$("选择器:even")           偶数选择器
$("选择器:lt(索引)")        小于索引选择器  //获取小于这个索引的元素
$("选择器:gt(索引)")        大于索引选择器  //获取大于这个索引的元素
$("选择器:header")         标题选择器      //获得标题（h1~h6）元素，固定写法  
$("选择器:eq(index)")      等于索引选择器   //$('div').eq(5);   //选择第6个div元素
$("选择器:not(selector)")  非元素选择器    //$('div').not('.myClass'); //选择不等于myClass的div元素
复制代码

表单过滤选择器
:enabled   获得可用元素
:disabled  获得不可用元素
:checked   获得单选/复选框选中的元素
:selected  获得下拉框选中的元素
复制代码

.index()           索引选择器      //元素的索引

// 操作当前元素集，删除不匹配的元素，得到一个新的集合
.filter() 
$('li').filter('.a').css('background-color', 'red')

// 检索该条件在每个元素的后代中是否存在，将符合条件的的元素构成新的结果集
.has() 
$('li').has('span').css('background-color', 'red')

// 当前选中元素的上下文中找到符合条件的后代，返回的是子元素
.find() 
$('li').find('span').css('background-color', 'red');
复制代码

⚠️注意: filter()方法与has()方法中的参数，都是过滤条件。不同的是filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中

有元素获取其他元素的方法

当前元素.next()           -> 下一个兄弟元素
当前元素.nextAll()        -> 后面所有的兄弟元素
当前元素.prev()           -> 前一个兄弟元素
当前元素.prevAll()        -> 前面所有的兄弟元素
当前元素.siblings()       -> 所有的兄弟元素(没有自己)
当前元素.parent()         -> 父级元素
当前元素.children()       -> 当前元素中所有的子元素(直接的子元素)
当前元素.find("选择器")    -> 从当前元素中找某个或者是某些元素
当前元素.has("选择器")     -> 从当前元素中检索后代是否存在匹配的元素
当前元素.filter("选择器")  -> 操作当前元素集，删除不匹配的元素，得到一个新的集合
复制代码

使用JQ选择器的案例

奇红偶黄

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<script>
  //选取的索引是从0开始，索引0对第一个元素，所以第一个元素为红色
  $("ul>li:even").css("backgroundColor", "red");   //even -> 偶数
  $("ul>li:odd").css("backgroundColor", "yellow"); //0dd  -> 奇数的
</script>
复制代码

链式编程

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<script>
  $(function () {
    $("ul>li").mouseenter(function () {
      $(this).css("backgroundColor", "red")
    }).mouseleave(function () {
      $(this).css("backgroundColor", "")
    }).click(function () {
      $(this).css("color", "green").css("fontSize", "30px").css("fontFamily", "全新硬笔行书简")
    })
  })
</script>
复制代码

验证用户输入

验证为中文名字则文本框的背景为绿色,否则为红色

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="username" id="input">

<script>
  $(function () {
    $("input[name=username]").blur(function () {
      var pattern = /^[\u4e00-\u9fa5]{4,8}$/;
      if (pattern.test($(this).val())) {
        $(this).css("background", "green")
      }
      else { $(this).css("background", "red") }
    });
  })
</script>
复制代码