zoukankan      html  css  js  c++  java
  • 12-7jquery选择器学习

    p:odd 选择奇数个数的p标签
     
    p:even选择奇数个数的p标签
     
    p:gt(n)选择下标 大于n的p标签
     
    p:lt(n)选择下标小于n的p标签
     
    $(":root ")选择的是根元素,也就是说可以控制整个页面的属性例:$(":root").css("background","blue");
     
    $("p:target")选择匹配id和标识符相匹配的元素,target在jquery中还有其他的用法例:
     event.target.nodeName
    可以用来标示那个元素触发了事件
     

     
    内容过滤
     
    $("div:contains('john')")  查找所有包含john的div元素          //如果是字母的话,则区分大小写
     
    $("p:empty")查找所有不包含子元素或者文本的p标签
     
    $("p:parent")查找所有包含子元素或者文本的p标签
     
    $("div:has(p)")匹配所有包含p标签的div元素

    可见性过滤器
     
    $("div:hidden")匹配所有不可见的元素或者type为hidden的元素
     
    $("div:visible") 匹配所有可见的div元素

     
    属性过滤选择器
     
    $("div[id]")查找所有含有id属性的div元素 //可以为任意属性
     
    $("input[name='new']") 匹配所有name为new的input元素   //可以为任意自定义的元素
     
    $("input[name!='new']") 匹配所name不为new的input元素   //可以为任意自定义的元素
     
    $("input[name ^='new']") 匹配所name以new开始的input元素   //可以为任意自定义的元素
     
    $("input[name $='new']") 匹配所name以new结束的input元素   //可以为任意自定义的元素
     
    $("input[name *='new']") 匹配所包含name字符串的input元素   //可以为任意自定义的元素
     
    $("input[name *='new'][id]") 匹配所包含name字符串且有id属性的input元素   //可以为任意自定义的元素
     

    表单对象属性过滤选择器
     
    $("p:disabled") 匹配所有不可用的p标签
     
    $("p:enbled") 匹配所有可用的p标签
     
    $("input:checked")匹配所有选中的被选中元素,包含复选框,单选框。不包括select中的option
     
    $(":selected")匹配所有选中的option元素
     

     
     
    $("p").index();   匹配出p标签的索引值,还有其他用法:例:
          $("p").index(document.getElementById("a"));  会查询出id为a的p标签的索引值     ,这是以传递一个dom对象,返回这个对象在原先集合中的索引位置
          $("p").index($("#a"));  这是以传递一个jquery对象返回这个对象在原先集合中的索引位置
          $("p").index($('p:gt(0)')  传递一个索引值大于0的集合,并返回第一个元素的索引值
          $("#id").index($("li"))    传递一个选择器,返回#id在所有li中的索引值
          $("#id").index()    不传递参数,返回#id在整个同辈元素中的索引位置
     
    $("p").data("a",{key:"value ",key2:"value2 "});        取值的时候语法为:$("p").data("a");
           如果要删除之前添加的数据的话:$("p").removeData("a");
           
     $("p"):animated 获取正在执行动画效果的p标签元素
     
     

    dom操作
     
    设置元素操作
    $("img").attr("src","img/a.png");    //这是单个属性设置的时候
    $("img").attr({src:"img/a.png",title:"这是a图片"});   //这是设置多个属性的时候
     
    删除元素操作
    $("img").removeAttr("src");   删除img的src路径
     
    元素内容操作
    $("span").text ();   //获取span里面的文本内容
    $("span").html();  //获取span里面的html内容
     
    $("span").text("你好啊"); //设置span的文本内容
    $("span").html("你好");//设置span的html内容
     
    .val/.text/.html   
    这三个的区别是,
    html可以输出html元素节点及文本节点,
    val输出的是实体,且val只支持表单元素
    text的话如果需要输出的是元素节点的话直接会以实体方式显示出来
     
     

    $("select").change(function(){
      var str=$("select").val().join(".");
    })
    这样可以获取每次选择后的select的值
     
            
     addClass属性和removeClass属性可以添加和移出class样式
    addClass添加的时候可以如下面的例子一样多个样式:
      $("p").addClass("样式1 样式2 样式3");    //中间用空格隔开
      同样————删除样式也可以如此,例
    $("p").removeClass("样式1 样式2 样式3");    //中间用空格隔开
     
    toggleClass可以切换样式,例
    $("p").click(function(){
       $(this).toggleClass("样式");
    });
     

     
    创建节点元素
    append元素的语法:
      $(html)    例
    var ap=$("<div title='nihao'>hello</div>");
    $("body").append(ap);
    或者
    $("body").append( "<div title='nihao'>hello</div>" );
     

    插入节点
    append("<div title='nihao'>hello</div>");
    另:append(function(){index,html})
     
    $("body").append( function(){
          var a= "<div title='nihao'>hello</div>" ;
          return a;
    })
     
    appendTo的作用是向指定元素插入界面中已存在的元素,例
               <img id ="a" src ="img/s2-1.png" alt ="adadaadds" />
               < img id= "b" src= "img/s2-2.png" alt= "adadaadds" />
               < span id= ""></ span>
               $("img#a").appendTo($( "span"));
     
     
    after和appen的作用差不多不过after主要是向...之后添加元素,例:
     
                $("span").after("<div title='nihao'>hello</div>");
           或者
             $("span").after(function(){
                 var a=$("<div title='nihao'>hello</div>" );
                return a;
             })
     
    before是向....之前插入元素用法与after一样
     
    insertAfter的作用其实和after的作用差不多,例
                $("<p>你好</p>").insertAfter("span");
    insertBefore的语法如上和insertA
     
     
    复制节点
    clone复制现有节点元素,例
    $("img").click( function(){
         $(this).clone( true).appendTo("span" );
    })
     
    替换节点
    $("span").click( function(){
         $(this).replaceWith( "<span>你好啊啊啊</span>" );
    })
    $("#id").replaceWith("content");   //第二个括号里面放的会是内容或者元素节点+内容或者是对象
     
     
    replaceAll和replaceWith最大的区别在于替换字符的顺序
    $("<span>你好啊啊啊</span>").replaceAll("#a");
     
    包裹元素
    wrap的作用是用元素包裹起指定的元素,例
    $("span").wrap( "<i></i>" );
     

     
    向上查找祖先元素
    parent是向上一级,parent是所有父级
     
    parentsUntil的作用是匹配指定范围内的父级元素,如果不加参数的话,则相当于parents,匹配所有父级元素。
    获取到的是多个值,
    语法是:
    $("li.ac").parentsUntil("ul").css("background","red");
     
    offsetParent是向上找到当前元素的第一个定位祖先元素,offsetParent
     
    closest的作用是查找指定的父级元素对象,向上寻找,查找到,便停止。切只能返回0或者1个元素
    语法是:
    $("li.ac").closest("ul").css("background","red");
     
    向上查找相邻元素
    prev方法用来向上查找相邻元素 注:prev如果不填参数,则向上所有上一个相邻,也就是获取向上最近的一个,。在,如果有参数,则筛选
    语法为:
         $(".av").prev().text();
     
    prevAll向上查找所有邻近元素,无参的时候则是向上匹配所有元素,有参的话,就筛选出符合条件的对象
     
    prevUntil不填参数的时候可以向上匹配所有同级元素,填了的话则匹配符合的元素
     
    向下查找相邻元素
    反向的next,nextAll和nextUntil的语法参照上面的向上查找
     
     
    删除元素
    remove的用法
    $("ul li:eq(0)").remove();   删除ul下面第一个li及其内所有元素
    $("ul li").remove("[title=3]");删除title为3的元素及其内所有元素
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    vue-ssr优化
    学习基础笔记1
    js原型链继承图
    浏览器缓存和Service Worker
    react项目启动详解(转载)
    深拷贝js对象或数组
    css多边形
    css三角形
    字体文件使用及压缩
    前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
  • 原文地址:https://www.cnblogs.com/jldiary/p/5124581.html
Copyright © 2011-2022 走看看