jQuery部分选择器示例

Posted 2020-12-10 jc1995

jQuery是目前最流行的javascript程序库，它是对JavaScript对象和函数的封装。它能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

语法：$(selector).action() ;

jQuery选择器：

一、通过CSS选择器选取元素(都是选择背景变色，相应的body就不写了)
1.基本选择器

例：

选择所有的 span 元素和id为two的元素

$(function(){
    $("#btn5").click(function(){
     $("span,#two").css("background-color","#bbffaa");
    });
   });

2.层次选择器

例：

选择 id 为 two 的元素后面的所有 div 兄弟元素

$(function(){
    $("#btn4").click(function(){
     $("#two~div").css("background", "#bbffaa");
    });
   });

3.属性选择器

例：

选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素

$(function(){
  $("#btn8").click(function() {
   $("div[title][title!=test]").css("background", "#bbffaa");
  });
 });
二、通过过滤选择器选择元素
1.基本过滤选择器

例：

选择当前正在执行动画的所有元素

$(function(){

$("#btn10").click(function(){
     $(":animated").css("background", "#bbffaa");
    });
   });
2.可见性过滤选择器

例：

选择所有不可见的 input 元素

$(function(){
    $("#btn3").click(function(){
     alert($("input:hidden").val());
    }); 
   });