一.jQuery版本兼容

jQuery版本2以上不支持IE6,7,8浏览器。

如果需要支持IE6/7/8，那么请选择1.9

同样还可以通过条件注释在使用IE6/7/8时只包含进1.9

 <!--[if lt IE ]>

     <script src="jquery-1.9.0.js"></script>

 <![endif]-->

 <!--[if gte IE ]><!-->

     <script src="jquery-2.0.0.js"></script>

 <!--<![endif]-->

 

1.HTML的元素选取

2.HTML的元素操作

3.HTML DOM遍历和修改

4.js特效和动画效果

5.css操作

6.HTML事件操作

7.ajax异步请求方式

三.选择器

通过$(":button")可以选取所以type="button"的<input>元素和<button>元素，如果去掉冒号，$("button")只能获取<button>元素。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

     $(document).ready(function(){

         $("#test1").click(function(){

             $("button").hide();

         });

         $("#test2").click(function(){

             $(":button").hide();

         });

     });

 </script>

 </head>

 <body>

     <p id="test1">点进这里测试  <b>button</b></p>

     <p id="test2">点进这里测试 <b>:button</b></p>

     <button>Button 按钮</button>

     <input type="button" value="Input 按钮">

 </body>

 </html>

1.基本选择器

$("#id")            //ID选择器

$("div")            //元素选择器

$(".classname")     //类选择器

$(".classname,.classname1,#id1")     //组合选择器

2.层次选择器

 $("#id>.classname ")    //子元素选择器

$("#id .classname ")    //后代元素选择器

$("#id + .classname ")    //紧邻下一个元素选择器

$("#id ~ .classname ")    //兄弟元素选择器

3.过滤选择器(重点)

$("li:first")    //第一个li

$("li:last")     //最后一个li

$("li:even")     //挑选下标为偶数的li

$("li:odd")      //挑选下标为奇数的li

$("li:eq(4)")    //下标等于4的li

$("li:gt(2)")    //下标大于2的li

$("li:lt(2)")    //下标小于2的li

$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素

$("td:empty")                 //不包含子元素或者文本的空元素

$("div:has(selector)")        //含有选择器所匹配的元素

$("td:parent")                //含有子元素或者文本的元素

3.3可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素

$("li:visible")      //匹配所有可见元素

3.4属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素

$("div[id='123']")        // id属性值为123的div 元素

$("div[id!='123']")        // id属性值不等于123的div 元素

$("div[id^='qq']")        // id属性值以qq开头的div 元素

$("div[id$='zz']")        // id属性值以zz结尾的div 元素

$("div[id*='bb']")        // id属性值包含bb的div 元素

$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

3.5状态过滤选择器

$("input:enabled")    // 匹配可用的 input

$("input:disabled")   // 匹配不可用的 input

$("input:checked")    // 匹配选中的 input

$("option:selected")  // 匹配选中的 option

4.表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素

$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同

$(":password")   //所有密码框

$(":radio")      //所有单选按钮

$(":checkbox")   //所有复选框

$(":submit")     //所有提交按钮

$(":reset")      //所有重置按钮

$(":button")     //所有button按钮

$(":file")       //所有文件域

jQuery学习笔记一的更多相关文章

  1. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  2. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  3. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  4. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  7. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  8. jQuery学习笔记之插件开发（4）

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  9. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  10. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

随机推荐

  1. npm 项目更换目录后无法启动

    问题描述: 使用 Vue-cli 创建的项目,当文件移动到其他目录后,无法正常启动,报错信息如下: 分析原因: npm 项目,在安装依赖(node_modules)的时候,会记录当前的文件路径.当路径 ...

  2. 本地Git仓库同步到Bitbucket 远程Git仓库

    转载自:http://blog.csdn.net/lue2009/article/details/46553829 本地仓库内容可以和多个远程仓库同步,本地仓库出问题或者远程仓库其中一个有问题,那么剩 ...

  3. 走进Vue时代进阶篇(01)：重构电商购物车模块

    前言 从这篇文章开始,我准备给大家分享一些关于Vue.js这门框架的技巧性系列文章,正好我们公司项目中也用到了Vue.所以,教是最好的学.进阶篇比较适合于二三线城市,还在小厂打拼的童鞋们.欢迎你们跟着 ...

  4. HTML5本地存储应用sessionStorage和localStorage

    在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定. html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数 ...

  5. 前端开发chrome console的使用 ：评估表达式 – Break易站

    本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...

  6. 【Java框架型项目从入门到装逼】第七节 - 学生管理系统项目搭建

    本次的教程是打算用Spring,SpringMVC以及传统的jdbc技术来制作一个简单的增删改查项目,对用户信息进行增删改查,就这么简单. 1.新建项目 首先,打开eclipse,新建一个web项目. ...

  7. jdk8新特性（文章推荐）

    文章推荐 jdk9都已经出来了,虽然很多项目都已经使用jdk8,但是很少会用到jdk8中的新特性.本人经常用的到也就是使用Stream,Lambda,但也仅仅是使用,基本不知道什么Function,C ...

  8. [代码审计]青云客Cms前台有条件注入至getshell，后台xss至getshell、至弹你一脸计算器

    之前写了一篇关于青云客cms的文章,发在了t00ls,就不copy过来了. 给个链接,好记录一下. https://www.t00ls.net/thread-43093-1-1.html

  9. Oracle COMMIT语句的处理顺序

    Oracle COMMIT语句相信大家都有一定的了解,下面就为您介绍Oracle COMMIT语句的处理步骤,希望对您能有所帮助. Oracle COMMIT语句处理顺序 当事务提交时,Oracle分 ...

  10. python3之File文件方法

    1.读写文件 open()将会返回一个file对象,基本语法: open(filename,mode) filename:是一个包含了访问的文件名称的路径字符串 mode:决定了打开文件的模式:只读, ...