jQuery学习(选择器)

页面导航:首页 > 网络编程 > JavaScript > jQuery学习(选择器)

jQuery学习(选择器)

来源: 作者: 时间:2016-02-02 09:58 【

下面的一段时间将会一步一步学习jquery,其实一直想写一系列关于jquery学习的记录,万事开头难,这次需要坚持。 jquery是一个优秀大JavaScript库,使用它,我们可以进行快速开发,不用写

下面的一段时间将会一步一步学习jquery,其实一直想写一系列关于jquery学习的记录,万事开头难,这次需要坚持。

jquery是一个优秀大JavaScript库,使用它,我们可以进行快速开发,不用写那么多的JavaScript代码,包含了对css,ajax,页面动画等重要的操作。更多关于jquery的信息,请百度一下,今天将学习jquery的选择器。

在页面中引入jquery

首先需要下载jquery

http://jquery.com/download/
这里有压缩的,也有没有压缩的,其实两个文件内容都是一样的,区别就是压缩过的对于程序猿来讲,很难读懂,因为去掉了很多空格,代码很紧凑,文件也比较小,这里我下载的是没有压缩的。

创建工程,引入jquery

这是我的工程目录:
这里写图片描述
在html中引入jquery-2.1.4.js




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

添加页面载入函数

页面载入函数就是对window.load事件注册事件的一个代替,使程序员编写代码更加简单,不用绑定页面载入方法,我们可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

<script type="text/javascript">
    $(document).ready(function(){
        alert("hello world");
     });
</script>

此时在该页面载入的时候,就会首先alert一个”hello world”出来。。

jquery选择器

id选择器

使用jquery来选择html元素是很方便的,比如,之前很长的一段根据id选择则的代码document.getelementbyid(“id”) 在使用了jquery以后,只需要$(“#id”)即可。


this is first id
this is second id
$("#id_one") 将会得到id="id_one"的标签 $("#id_two") 将会得到id="id_two"的标签

element选择器

element选择器是根据给定的元素来进行选择的。比如有如下html内容:


this is first id
this is second id

this is p

使用 $("div") 匹配结果:
this is first id
this is second id

class选择器

class选择器是根据给定的类进行选择,类似于id选择器


this is first id
this is second id
this is first class
使用: $(".class_one") 匹配结果:
this is first class

*选择器

使用*号选择器,可以选择body标签中的每一个元素。


this is first id
this is second id
this is first class

this is p

使用: $("*") 匹配结果:
this is first id
this is second id
this is first class

this is p

selector1,selector2,selectorN选择器

这个选择器是可以添加多个过滤条件,这些条件过滤后的结果叠加以后返回。


div

p class="myClass"

span

p class="notMyClass"

使用: $("div,span,p.myClass") 匹配结果:
div

p class="myClass"

span

这里多个条件之间使用”,”分割,这里选择div标签,span标签,和class=”myClass”的标签。

ancestor descendant选择器

这个选择器是选择给定的祖先元素下的所有匹配的子元素。


找到form表单中的所有input元素 $("form input") 匹配结果: [ , ]

parent > child

匹配给定的父元素的所有子元素


使用: $("form > input") 匹配结果: []

prev + next选择器

prev + next选择器将匹配紧接着prev元素后边的所有next元素


使用: $("label + input") 匹配结果: [,]

prev ~ siblings选择器

prev ~ siblings选择器匹配prev的同辈元素

:first ,:last ,:even ,:odd选择器

:first,获取第一个元素。
:last 获取最后一个元素。
:even 匹配索引数是偶数的元素,索引从0开始
:odd 匹配索引数是奇数的元素,索引从0开始


  • first
  • second
  • third
  • fourth
  • fifth
使用: $("li:first") 结果: [
  • first
  • ] $("li:last") 结果: [
    • fifth
    • ] $("li:even") [
      • first
      • ,
        • third
        • ,
          • fifth
          • ]

            :header选择器

            匹配如:h1,h2,h3这样的标题元素

            :focus

            匹配当前获取获取焦点的元素

            :contains(text)

            :contains(text)匹配包含指定text的元素

            
            
            John Resig
            George Martin
            Malcom John Sinclair
            $("div:contains('John')") 匹配结果: [
            John Resig
            ,
            Malcom John Sinclair
            ]

            :hidden

            匹配所有隐藏的元素

            :visible

            :visible匹配所有可见的元素

            属性选择器

            [attribute]

            [attribute]匹配包含给定属性的元素

            
            

            Hello!

             
            $("div[id]") 匹配结果: [
             
            ]

            [attribute=value]
            匹配给定的属性是某个特定值的元素
            [attribute!=value]
            匹配所有不含有指定的属性,或者属性不等于特定值的元素
            [attribute^=value]
            匹配给定的属性是以某些值开始的元素

            
            
            
            
            $("input[name^='news']")
            结果:
            [ ,  ]

            [attribute$=value]
            匹配给定的属性是以某些值结尾的元素

            [selector1][selector2][selectorN]

            复合选择器,需要满足所有的条件

            
            
            
            
            
            $("input[id][name$='man']")
            结果:
            [  ]

            表单选择器

            :button
            匹配所有按钮
            :checkbox
            匹配所有复选框
            :password
            匹配所有密码框
            :text
            匹配所有的单行文本框
            :input
            匹配所有 input, textarea, select 和 button 元素
            :radio
            匹配所有单选按钮
            :submit
            匹配所有提交按钮
            :image
            匹配所有图像域
            :file
            匹配所有文件域
            :enabled
            匹配所有可用元素
            :checked
            匹配所有选中的被选中元素
            :selected
            匹配所有选中的option元素

            以上就是jquery中常见的选择器,可以看到jquery我人员提供了丰富的选择器,比原始的Script操作dom更加的方便。

Tags:

相关文章

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<