精华内容
下载资源
问答
  • JQuery中的选择器

    万次阅读 多人点赞 2020-08-10 21:09:40
    JQuery引入与选择器JQuery的引入JQuery中的$JQuery选择器1.基本选择器2.层次选择器3.过滤选择器3.1 、基本过滤选择器3.2、内容过滤选择器3.3 、可见性过滤选择器3.4 、属性过滤选择器3.5 、子元素过滤选择器3.6 、...

    JQuery的引入

    1.本地引入

    <script type="text/javascript" src="jquery.js"></script>
    

    2.远程引入

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.4.min.js">
    </script>
    

    JQuery中的$

    在jQuery库中,$就是jQuery的一个简写形式。
    如:

    $('id') ==>  jQuery('#id')
    

    在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法,
    以免在同时使用JavaScript和jQuery时发生冲突。

    JQuery选择器

    1.基本选择器

    • 通配符选择器
      选择页面内所有元素
    $('*')
    
    • id选择器
      根据指定id匹配元素
    $('#id')
    
    • 类选择器
      根据类名匹配元素
    $('.class')
    
    • 元素名选择器
      根据元素名匹配元素
    $('div')
    
    • 分组选择器
      分组匹配元素
     $('div,span,.hotclass')
    

    2.层次选择器

    • 选择E1下所有E2
    $('E1 E2')
    
    • 选择E1下的直接子元素
    $('E1> E2')
    
    • 选择E1后紧邻的一个兄弟元素
    $('E1+ E2')
    //等同于
    $(E1).next(E2)
    
    • 选择E1后所有的兄弟元素
    $('E1~ E2')
    //等同于
    $(E1).nextAll(E2)
    

    3.过滤选择器

    主要是通过特定的过滤规则来筛选出需要的DOM
    元素,过滤规则与CSS中的伪类选择器语法相
    同,即过滤选择器都是以冒号(:)开头。

    3.1 、基本过滤选择器

    选择器 描述
    :first 选择第一个元素
    :last 选择最后一个元素
    :not(E1) 去除所有E1选择器匹配的元素
    :even 选择索引是偶数的所有元素,索引从0开始
    :odd 选择索引是奇数的所有元素,索引从0开始
    :eq(index) 选择索引值是index的元素,index从0开始
    :gt(index) 选择索引值大于index的元素,index从0开始
    :lt(index) 选择索引值小于index的元素,index从0开始
    :header 选择所有的标题元素,h1~h6
    :animated 选择当前正在执行动画的所有元素

    3.2、内容过滤选择器

    选择器 描述
    :contains(text) 选择含有text文本内容的元素
    :empty 选择不包含子元素或文本的空元素
    :has(E1) 选择包含有(E1选择器匹配的元素)的所有元素
    :parent 选择含有子元素或文本的元素

    3.3 、可见性过滤选择器

    选择器 描述
    :hidden 选择所有不可见元素
    :visible 选择所有可见元素

    3.4 、属性过滤选择器

    选择器 描述
    [attribute] 选择拥有此属性的元素
    [attribute=value] 选择属性值为value的元素
    [attribute!=value] 选择属性值不为value的元素
    [attribute^=value] 选择属性值以value开始的元素
    [attribute$=value] 选择属性以value值结束的元素
    [A1][A2]…A[N] 用属性选择器合并成一个复合属性选择器。满足多个条件。

    3.5 、子元素过滤选择器

    选择器 描述
    :nth-child(index/even/odd) 选取每个父元素下的第index素或奇偶元素.(indexc从1开始)
    :first-child 选择每个父元素的第1个子元素
    :last-child 选择每个父元素的最后1个子元素
    :only-child 如果某个元素是它父元素中惟一的子元素,那么将会被匹配.素中含有其他元素,则不会

    :nth-child()选择器详细功能描述:
    1.:nth-child(even)能选择每个父元素下的索引值是偶数的元素
    2.:nth-child(odd)选择出每个父元素下的索引值是奇数的元素
    3.:nth-child(2)选取每个父元素下的索引值等于2的元素
    4.:nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始
    5.:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始

    3.6 、表单对象属性过滤选择器

    选择器 描述
    :enabled 选择所有可用元素
    :disabled 选择所有不可用元素
    :checked 选择所有被选中的元素(单选框,复选框)
    :selected 选择所有被选中的选项元素(下拉列表)

    4、表单选择器

    选择器 描述
    :input 匹配所有input、textarea、select、button元素
    :text 选择所有单行文本框
    :password 选择所有密码框
    :radio 选择所有单选框
    :checkbox 选择所有复选框
    :submit 选择所有t提交按钮
    :image 选择所有图像按钮
    :reset 选择所有重置按钮
    :button 选择所有按钮
    :file 匹配所有文件域
    :hidden 匹配所有不可见元素

    访问链接获得所有版本JQuery

    展开全文
  • jquery中的选择器

    2017-07-03 22:34:35
    jquery中的选择器

    如果已知父元素parent和子元素.child,哪种查找最快呢?
    以下是种很快的查找方式

    $parent.find(‘.child')

    还有另外一种查找方式

    $(‘.child', $parent))

    jquery使用的是sizzle这种选择器到底什么原理呢?
    大家可以看连接中的文章;
    http://blog.csdn.net/freshlover/article/details/10813657
    看来有空真需要好好研究以下jquery源码?
    这里我有个想法:使用sizzle.js配合原声js,这样会不会提高性能?
    不过jquery插件这么多?想都学会了,也不可能。但是,不学,怎么可能会?

    展开全文
  • jQuery中的选择器

    2018-09-30 23:20:13
    jquery中的选择器写法和css选择器写法十分类似,区别在于两者的作用效果不同,css选择器找到元素是添加样式,而jquery选择器找到元素后是添加行为。 jquery选择器分为:基本选择器,层次选择器,过滤选择器这三大类...

    jquery中的选择器写法和css选择器写法十分类似,区别在于两者的作用效果不同,css选择器找到元素是添加样式,而jquery选择器找到元素后是添加行为。

    jquery选择器分为:基本选择器,层次选择器,过滤选择器这三大类。

    基本选择器:基本选择器是jquery中最常用的选择器。

    选择器 描述 返回 示例
    #id 根据指定id匹配一个元素 单个元素 $("#test")选取id为test的元素
    .class 根据给定的类匹配元素 集合元素 $(".test")选取所有class为test的元素
    element 根据给定元素名匹配元素 集合元素 $("p")选取所有<p>元素
    * 匹配所有元素 集合元素 $("*")选取所有元素

    selector1,selector2...

    selectorN

    将每一个选择器匹配到元素的集合并后一起返回 集合元素 $("div,span,myClass")选取<div>,<span>和拥有class为myClass的<p>标签的一组元素

     

    层次选择器:如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素,就选用层次选择器。

    选择器 描述 返回 示例
    $("ancestor descendant") 选取ancestor元素里所有descendant(后代)元素 集合元素 $("div span")选取<div>里的所有<span>元素
    $("parent>child") 选取parent元素下的child元素。 集合元素 $("div>span")选取<div>元素下元素是<span>的子元素
    $("prev+next") 选取紧接在prev元素后的next元素 集合元素 $(".one+div")等价于$(".one").next("div")选取class为one的下一个<div>同辈元素
    $("prev~siblings") 选取prev元素之后的所有sibling元素 集合元素 $("#two~div")等价于$("#prev").nextAll("div")选取id为two的元素后面所有的<div>同辈元素

    过滤选择器:主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与css中的伪类选择器语法相同,即选择器都以一个冒号开始。可以分为:基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器

    每种过滤选择器举几个例子。

    基本过滤选择器

    选择器 描述 返回 示例
    :first 选取第一个元素 单个元素 $("div:first")选取所有<div>元素中第一个<div>元素
    :header 选取所有标题元素 集合元素 $(":haeder")选取网页中所有的<h1>...<h6>标签
    :foucus 选取当前获取焦点的元素 集合元素 $(":focus")选取当前获取焦点的元素

    内容过滤选择器:

    选择器 描述 返回 示例
    :contains(text) 选取含有文本内容为“text”的元素 集合元素 $("div:contains('我')")选取含有文本‘我’的<div>元素
    :empty 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")选取不含子元素(包括文本元素)的<div>空元素
    :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含有<p>元素的<div>元素
    :parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取拥有子元素的<div>元素

     

    可见性过滤选择器:

    :hidden:选取所有不可见的元素;

    :visible:选取所有可见的元素。

    还有几个过滤选择器本质差不多就不列举了。

     

     

     

     

     

    展开全文
  • Jquery中的选择器

    2014-08-21 23:15:10
    Jquery随着自身的发展,已经有越来越多的人...Jquery中的选择器有很多类,比如Id选择器,class选择器,html标签选择器等。 Id选择器:就是通过一个html元素的id来选择它,因为html中的id是唯一的,所以通过

    Jquery随着自身的发展,已经有越来越多的人开始了解Jquery,并且慢慢喜欢上了她,她是那么的简洁,那么的令人着迷,并吸引了一批爱好者为她做嫁衣。好了,让我来介绍一下Jquery的选择器吧。

    Jquery中的选择器有很多类,比如Id选择器,class选择器,html标签选择器等。

    Id选择器:就是通过一个html元素的id来选择它,因为html中的id是唯一的,所以通过id,我们可以找到唯一的html元素。
    比如:<div id="div1" class="balck_tree"><p></p></div>
    我们可以通过$("#div1")来选择外面的div,#是用来表示我进行的是通过id的选择。

    Class选择器:就是通过css中的class来选择一个元素或者多个元素。
    比如上面的例子中,我们也可以通过class来选择外面的div,$(".balck_tree"),括号里的.表示我进行的是通过class的选择。

    Html标签选择器:通过html的标签来选择元素,比如还是上面的例子,我们也可以用$("div")来选择,不过要记住,这样会选择页面上所有的div,所以他一般是用来选择那些大类,然后配合其他的选择器来使用。

    下面介绍一些常用的选择器的用法:


    $("*") 所有元素
    $("#lastname") id="lastname" 的元素
    $(".intro") 所有 class="intro" 的元素
    $("p") 所有 <p> 元素
    $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
       
    $("p:first") 第一个 <p> 元素
    $("p:last") 最后一个 <p> 元素
    $("tr:even") 所有偶数 <tr> 元素
    $("tr:odd") 所有奇数 <tr> 元素
       
    $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
    $("ul li:gt(3)") 列出 index 大于 3 的元素
    $("ul li:lt(3)") 列出 index 小于 3 的元素
    $("input:not(:empty)") 所有不为空的 input 元素
       
    $(":header") 所有标题元素 <h1> - <h6>

       
    $(":contains('W3School')") 包含指定字符串的所有元素
    $(":empty") 无子(元素)节点的所有元素
    $("p:hidden") 所有隐藏的 <p> 元素
    $("table:visible") 所有可见的表格
       
    $("[href]") 所有带有 href 属性的元素
    $("[href='#']") 所有 href 属性的值等于 "#" 的元素
    $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
    $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
       
    $(":input") 所有 <input> 元素
    $(":text") 所有 type="text" 的 <input> 元素
    $(":password") 所有 type="password" 的 <input> 元素
    $(":radio") 所有 type="radio" 的 <input> 元素
    $(":checkbox") 所有 type="checkbox" 的 <input> 元素
    $(":submit") 所有 type="submit" 的 <input> 元素
    $(":reset") 所有 type="reset" 的 <input> 元素
    $(":button") 所有 type="button" 的 <input> 元素
    $(":image") 所有 type="image" 的 <input> 元素
    $(":file") 所有 type="file" 的 <input> 元素
       
    $(":enabled") 所有激活的 input 元素
    $(":disabled")  所有禁用的 input 元素
    $(":selected") 所有被选取的 input 元素
    $(":checked") 所有被选中的 input 元素
    展开全文
  • jquery 中的选择器

    2019-07-31 15:23:03
    jQuery选择器继承了CSS与Path语言的语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成元素属性和行为的处理。...
  • jQuery中的选择器种类

    2019-09-28 23:20:54
    选择器概念: ...jQuery选择器使用$符号,等同于jquery...jQuery中的选择器种类有: 1.id选择器 $("#myElement"); 2.class选择器 $(".myClass"); 3.属性选择器(标签选择器) $(“p”); 4.通配符选择器 $("*"); 匹配所...
  • CSS选择器与jQuery中的选择器
  • jquery选择器连续选择It's time to write some JQuery now. Do check out the introductory article on JQuery first in case you haven't. Before we move to Selectors in JQuery, let's talk a bit about the ...
  • 学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:<思维导图>): ...
  • 选择器是jQuery的重要组成部分,在jQuery中,对事件处理、遍历DOM和...下面是关于jQuery中的选择器的思维导图,全屏观看,请点击:jQuery中的选择器 转载于:https://www.cnblogs.com/yuchengping/p/3417941.html...
  • 关于jquery中的选择器的概念和各个选择器的用法及功能   概念:选择器允许您对元素组或单个元素进行操作,在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器   选择器的分类:基本、层次、简单...
  • 选择器是Jquery框架根基,在Jquery中对事件处理。遍历DOM和ajax操作都依赖选择器。 Jquery选择器的有点:就是写法简洁。 $(“#username”)等价于: domcument.getElementById(“username”); $(“tagName”)等价...
  • 利用jquery中的选择器,让p元素的字体颜色变成红色 要求:至少写三种方法 代码: <div id="div10"> <p>我是p标签</p> <button>1</button><button>2</button><button>...
  • 使用jquery获取radio值,最重要是掌握jquery选择器的使用,在一个表单我们通常是要获取被选中那个radio项值,所以要加checked来筛选,比如有以下一些radio项:1.<input type="radio" name="testradio...
  • jquery中的选择器简介

    2013-11-20 14:19:29
    jquery选择器有几种大类,而这几种大类又包含了很多小类,在这里先基本介绍下这些选择器。 大类基本有: 1、基本选择器 basics  1.id选择器  2.class选择器  3.element选择器  4.*选择...
  • JQuery JavaScript库:这些JavaScript库封装了很多预定义的... 选择器是进行JavaScript编程的基础,而jQuery提供了功能全面、强大、灵活的选择器供开发者使用。 出色的DOM封装  jQuery封装了大量的DOM操作,使原本复杂

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,700
精华内容 4,280
关键字:

jquery中的选择器