当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用jQuery访问和操作DOM元素

使用jQuery访问和操作DOM元素

2020年08月10日  | 移动技术网IT编程  | 我要评论

目录

改变元素样式

  • 用css()方式改变元素样式
  1. 只改变一个样式：
$("p").css("color","red");
  1. 改变多个样式（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);
  1. 将jQuery对象转换成DOM
//1.   var p1=$p(0);
//2.   var p2=$p.get[0];

层次选择器

  • 使用层次选择器改变元素的css属性：
  1. 后代选择器 （后代或者父子关系）：
$("div li").css("list-style","none");
  1. 子选择器（必须是直接的父子关系 ）：
$("ul>li").css("color","red");
  1. 相邻兄弟选择器（找和我挨着的后面的兄弟标签 ）：
$("#er+li").css("background-color","black");
  1. 通用兄弟选择器（找我后面所有的兄弟标签）：
$("#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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网