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. Postgresql插入或更新操作upsert

    幂等性的一个要求是多次操作的结果一致.对于update操作,多次直接的结果都是最后update的值,是满足需求的. 但对于insert,如果已经插入,第二次会报错,duplicate error, 主 ...

  2. 面向对象DAO模式

    DAO模式编写数据访问层代码步骤? 1.  接口 增.删.改.查的方法 方法的返回类型为泛型集合 Int rows=select语句的条数 If(rows>0) 方法的返回类型为泛型集合 If( ...

  3. 三、Linux的目录结构：

    root管理员的home目录root 其他用户的home目录home目录中

  4. tomcat8常用配置说明

    链接:https://www.jianshu.com/p/8b1c75951f70 2.tomcat8运行期错误HTTP头解析错误 修改tomcat的server.xml中的中配置  设置为8k &l ...

  5. moment.js

    javascript日期处理类库,还有一个moment-timezone.js JavaScript时区处理类库 moment可以在browser和Node.js中使用. 安装: npm instal ...

  6. php 跨域请求

    执行要在跨域请求的服务器端对应的代码上增加下面的代码 <?php namespace Admin\Controller; // 指定允许跨域访问 header('Access-Control-A ...

  7. seckill（1）秒杀系统主要步骤

  8. Beta冲刺 3

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10116813.html 作业博客:https://edu.cnblogs.com/campus ...

  9. Mac下安装证书fiddlerRoot.cer

    Step 1: 设置Mac的代理如下 Step 2:打开127.0.0.1:8888,下载fiddlerRoot.cer; Step 3:下载好了,双击安装,但是默认这个证书是不可信的,你需要在钥匙串 ...

  10. java后端的知识学习

    有良好的计算机基础知识,熟悉计算机网络技术以及常用的设计模式:有扎实的 Java 语言基础,熟悉 Java 多线程编程技术.JVM 虚拟机原理:熟悉J2EE体系架构,熟悉WebService.Spri ...