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标准库--time模块的详解

    time模块 - - -时间获取和转换 在我们学习time模块之前需要对以下的概念进行了解: 时间戳:时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08 ...

  2. Cronolog日志分割、定时清理

    阿里云发送短信提示服务器磁盘占用到80%警报短信 经过排查发现tomcat日志文件达到10个多G,手动删除过久的日志文件后恢复到50% 但是catalina.out文件还有6个G 解决方法 一.安装C ...

  3. 有关Java字符集编码的问题

    在Java语言中,下列关于字符集编码(Character set encoding)和国际化(i18n)的问题,哪些是正确的? A.每个中文字符占用2个字节,每个英文字符占用1个字节 B.假设数据库中 ...

  4. 声明一个set集合，使用HashSet类，来保存十个字符串信息，然后通过这个集合，然后使用iterator()方法，得到一个迭代器，遍历所有的集合中所有的字符串；然后拿出所有的字符串拼接到一个StringBuffer对象中，然后输出它的长度和具体内容； 验证集合的remove()、size()、contains()、isEmpty()等

    package com.lanxi.demo1_3; import java.util.HashSet; import java.util.Iterator; import java.util.Set ...

  5. yarn web ui 参数详解

    我们经常使用yarn调度,但是我们是否对调度队列显示参数真正了解呢?   下面我们来一一看看这些参数都是做什么用的,代表什么意思   hadoop是通过队列管理集群资源,翻开集群Web UI,找到Sc ...

  6. 第十七周翻译-SQL Server中事务日志管理的阶梯，级别5：以完全恢复模式管理日志

    SQL Server中事务日志管理的阶梯,级别5:以完全恢复模式管理日志 作者:Tony Davis,2012/01/27 翻译:赖慧芳 译文: 该系列   本文是Stairway系列的一部分:SQL ...

  7. for循环：用turtle画一颗五角星2

    import turtle turtle.setup(600,400,0,0) turtle.bgcolor('red') turtle.pencolor('yellow') turtle.fillc ...

  8. Python 语法1

    函数的定义: """ def 函数名(): 函数内容,函数内容, 函数内容,函数内容, """ ////////////////////// ...

  9. js循环出相同name，不同id的按钮，对其进行点击回复操作

    function getseat(){ var option= "<button class='btn'style='margin:5px;' onclick='onclickSeat ...

  10. python常量 变量 数据类型 注释 交互 if语句

    1.认识python python的创始人吉多·范罗苏姆(Guido van Rossum )龟叔在89年圣诞节开始开发python python属于解释型语言,强类型定义语言. 编译型/解释型:编译 ...