jQuery基础之一-原创手记-慕课网

初识jQuery

jQuery封装JavaScript中多个好用的函数成为并形成代码库，
操作时也更符合我们的习惯，并且减少了浏览器之间的兼容性。

引入
    本地
        <script src="jquery.js" type="text/javascript"></script>
    联网
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" 
         type="text/javascript"></script>

jQuery基础选择器

选择器
    选择网页中的DOM元素,精确更改网页中各个DOM元素的CSS属性等

    jQuery中的基础选择器很类似于CSS

普通选择器

标签选择器
    如：$("div")

id 选择器
    $("#ID")

.class 选择器
    $(".className")

* 选择器
    $("*")
    获取网页中的全部元素包括<head>,<body>
    技巧：如获取div标签下的全部子元素
        $("div *")

slec1,slect2,selecN 选择器
    $("slec1,slect2,selecN")
    请获取选择器slec1,slect2,selecN选择的元素
    实例:
        $("div,.red,#one")==$("div")+$(".red")+$("#one")
    注意： 选择器之间用","隔开,只有一个选引号

DOM层级之内

prev+next选择器
    $("prev+next")
    查找与"prev"元素紧邻的下一个"next"元素
    实例：
        $("div+p")
        释义:查找与div同一DOM层级的下面的第一个p元素

prev~siblings选择器
    类似于prev+next只不过是后面所有的"siblings"元素

DOM层级之间

ance desc 选择器
    ance==ancestor  desc==descendant祖先子孙选择器

    实例：
        $("div p") 将获取页面中所有div下所有p元素
    注意：
        ance desc之间为一个空格
        获取的是所有的desc后代元素
        不仅仅是第一代子元素

parent>child 选择器

    $("parent>child")
    类似于祖先子孙选择器但只是parent的第一代孩子

jQuery过滤性选择器

过滤性选择器是在基础选择器的基础上,在对获得的元素对象加以筛选。

注意：下列所有的过滤性选择器

    紧邻前面的基础性选择器(之间没有空格)

    所有过滤性选择器都不能独立存在,前面要有基础选择器

普通过滤性选择器

:first 过滤性选择器
    从已经获取到的所有元素中只选择第一个
    实例：
        $("li:first")   
        从已经获取到的所有li标签中只选择第一个

:last  过滤性选择器
    同:first

:eq(index) 过滤选择器
    从一组标签中选择一个任意的一个
    实例：
        $("li:eq(3)")
        释义：从已经获取到的所有li标签中只选择第四个

:contains(text) 过滤选择器

    对已经获取到的元素再次选择,只保留含有text文本的元素

    实例:
        $("li:contains('土豪')")
        释义：选择li标签内部含有"土豪"的li标签
    注意：
        当具有双重引号时必须是单双引号一起
        不能只有单引号或只有双引号

        contains具有"s"
:has(selector) 过滤选择器
    获取选择器中包含指定selector的所有元素
    实例：
        $("li:has('p')")
        释义：获取包含p标签的所有li标签

属性过滤选择器

[attribute=value] 属性选择器
    实例：
        $("li[title='黛玉']")
        获取title的属性值为"黛玉"的li标签
[attribute!=value] 属性选择器
    取反[attribute=value]

[attribute*=value] 属性选择器

    实例:
        $("li[title*='最']")
        获取title的属性值中只要包含"最"字即可的所有li标签

特殊属性

:hidden 过滤选择器
    获取指定的所有具有隐藏属性的元素
    实例：
        $("p:hidden")
        释义:获取所有具有display:none属性的p标签
:visible 过滤选择器
    与:hidden相反

子元素位置

:first-child 子元素过滤选择器

    实例:
        $("li:first-child")
        只获取li是第一个子孩子的li标签
:last-child 子元素过滤选择器

    实例:
        $("li:first-child")
        只获取li是最后一个子孩子的li标签

jQuery表单选择器

针对表单元素设置的选择器
注意：
   表单元素的过滤选择器与前面的基础选择器之间具有空格
   且所有的基础选择器都是获取的整个表单

普通选择器

:input
    获取全部的表单元素
    实例
        $("form :input")
        获取表单的所有子元素
:text 
    获取表单中全部的单行文本框
    <input type="text" />
    实例       
    $("form :text")
:password
    获取密码框

选择框选择器

:radio
    获取全部单选按钮
:checkbox
    获取全部复选框

按钮选择器

:submit
    实例
        $("#frmTest input:submit")
    注意：
        获取提交按钮时,前面要有input
:button
    获取全部的<button>

状态选择器

:checked
    获取如单选框,复选框，下拉列表框等处于该表单下的
    选中状态的全部元素
:selected
    只获取<select>中处于选中状态的option

    实例：
        $("#frmTest :selected")