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. python修炼第一天

    Python修炼第一天 新的开始:不会Python的运维,人生是不完整的. 为了我的人生能够完整,所以我来了!今后跟着太白金星师傅学习功夫,记录一下心得,以便日后苦练. 一 Python的历史: Py ...

  2. oracle新建表空间的四条语句

    1.create user platform identified by intest; 2.create tablespace PLATFORM_DATA datafile 'c:\PLATFORM ...

  3. python中文件读写

    读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...

  4. javascript20150124

    表达式与运算符 表达式 与数学中的定义相似,表达式是指具有一定的值的.用运算符把常数和变量连接起来的代数式.一个表达式可以只包含一个常数或一个变量.运算符可以是四则运算符.关系运算符.位运算符.逻辑运 ...

  5. ansible-play中for,if的使用

    #迭代循环的使用 #实现同时新建三个文件,同时部署三个服务 --- - host: websrvs remote_user: root task: - name: create some files ...

  6. find命令配合sed命令使用

    1.查找当前目录下所有以txt文件中包含123的数字都替换成5678 find ./ -name "*.txt" -exec  grep "123" {} \; ...

  7. Apache配置对外访问默认路径（域名默认访问路径）

    摘抄.同以下博主遇到同样问题,故此记录. 作者:ChasingdreamLY 原文:https://blog.csdn.net/qq_26591517/article/details/80414073 ...

  8. 2018-2019-2 《网络对抗技术》Exp4 恶意代码分析 20165326

    恶意代码分析 实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systra ...

  9. vue created中初始化属性

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

  10. 使用mbedtls的使用说明和AES加密方法（原来的PolarSSL）

    关于PolarSSL mbed TLS(以前称为PolarSSL)是TLS和SSL协议的实现,并且需要相应的加密算法和支持代码.这是双重许可与Apache许可证 2.0版(与GPLv2许可也可).网站 ...