jQuery部分选择器示例

牵手白首 2020-06-14

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());
    }); 
   });


 

相关推荐

Web全栈笔记 / 0评论 2020-06-15