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

jQuery基础之一的更多相关文章

  1. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  2. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  3. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  4. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  5. 【jQuery基础学习】09 jQuery与前端（这章很水）

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  8. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  9. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  10. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. myBatis简学

    mybatis使用: ①拷贝相关mybits ②编写对象关系映射,一般都是实体类名+Mapper.xml的格式 ③编写mybits配置文件: a)配置环境 b)配置映射文件地址 ④编写对象操作方法: ...

  2. SoapUI之cookie设置

    一.测试背景: 1)接口测试需要完成注册-->登录-->充值,使用soapui构建好测试用例.设置断言后,运行结果如下: 2)recharge接口运行失败,继续查看该接口具体发送的请求及返 ...

  3. codeforces 3b之贪心算法

    有货车运量V:有若干物品A 占2单位体积,有若干物品B占1单位体积:相同种类的物品价值不一定一样: 序号按照输入顺序而定:问货车可以拉走最多多少价值的物品,并输出所选物品的序号: 1)常规的解法思路: ...

  4. ionic2APP 如何处理返回键问题

    1.APP中难免会有自定义各种modal.alert,modal或alert处于激活状态时android用户按物理返回键,页面被返回,而这些弹窗切没有被返回,一种解决办法是可以在每个组件内用生命周期钩 ...

  5. 责任链模式（Chain of Responsibility)

    定义:为一个请求定义含有链状关系的接受对象,基于请求的类型,松耦合发送者和接受者之间的关系. 实现方式: 首先定义一个抽象类,包括一个公共抽象行为和决定子类链状关系的属性,然后创建一系列对象继承这个抽 ...

  6. PTA --- 时间复杂度 选择题

    1-1 2​N​​和N​N​​具有相同的增长速度. (2分) T         F 作者: DS课程组 单位: 浙江大学 1-2 (NlogN)/1000是O(N)的. (1分) T         ...

  7. 动态流程图关于jointJs的使用

    这段时间由于业务需要,需要展现动态的流程图.具体实现效果如图所示: jointJS中的线条以及框都是依赖SVG进行的二次开发.建议初学者先学习svg里相关属性,便于在阅读jointJs的API或者de ...

  8. selenium中的上传文件

    # 上传文件driver.find_element_by_xpath("//input[@value='上传文件']").send_keys(r"C:\Users\YKD ...

  9. 通过配置文件添加MIME类型

    在web.config配置文件中的configuration节点下添加如下节点: <system.webServer> <staticContent> <mimeMap ...

  10. AOP的第一个小坑

    今天看项目源码,看到Service类继承了一个SelfProxy类,这个类实现了一个叫self()的方法,用于返回动态代理生成的实例. 为什么要返回实例呢,因为有的时候类内部需要调用自身的public ...