使用jQuery访问和操作DOM元素

改变元素样式

• 用css()方式改变元素样式

1. 只改变一个样式：

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

2. 改变多个样式（json: {“属性1”:“赋值1”,“属性2”:“赋值2”} ）：

 $("#a1").css({"color":"blue","font-size":"32","background-color":"red"});

• 用addclass方式改变元素样式

$("h4").hover(function(){
                //$(this).addClass("test")
            });

• show：将隐藏的元素显示出来

$("h4").click(function(){
                $(this).next().show();//下一个兄弟元素
                $(this).prev().hide();//上一个兄弟元素
                $(this).prevAll().hide();//前面所有兄弟元素
            })

• DOM对象和jQuery对象相互转换

1. 将DOM对象转成jQuery对象

 var $p=$(p);

2. 将jQuery对象转换成DOM

//1.   var p1=$p(0);
//2.   var p2=$p.get[0];

层次选择器

• 使用层次选择器改变元素的css属性：

1. 后代选择器 （后代或者父子关系）：

$("div li").css("list-style","none");

2. 子选择器（必须是直接的父子关系 ）：

$("ul>li").css("color","red");

3. 相邻兄弟选择器（找和我挨着的后面的兄弟标签 ）：

$("#er+li").css("background-color","black");

4. 通用兄弟选择器（找我后面所有的兄弟标签）：

$("#er~li").css("font-size","40px")

过滤选择器

摘要	解释
$(“li:first”)	第一个li
$(“li:last”)	最后一个li
$(“li:eq(2)”)	下标为2的li
$(“li:gt(2)”)	下标大于2的li（不包括2）
$(“li:lt(2)”)	下标小于2的li（不包括2）
$(“li:even”)	下标为偶数的li
$(“li:odd”)	下标为奇数的li
$(“body :header”)	获取所有的标题 h1-h6

• 可见性过滤选择器

1. $(":visible"):选取所有可见的元素
2. $(":hidden"):选取所有隐藏的元素

//给显示按钮添加单击事件
 $("[value='显示']").click(function(){
        $("div:hidden").show();
 })
//给隐藏按钮添加单击事件
        $("[value='隐藏']").click(function(){
        $("div:visible").hide();
 })

本文地址：https://blog.csdn.net/qq_45562888/article/details/107896638