jQuery基础之一

时间：2023-03-08 17:16:35

jQuery基础之一

初识jQuery

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

jQuery官网

引入

    本地

        <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")
相关标签：JavaScript

相关文章