一.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. 一张图，理解JAVA体系结构、运行机制、JVN运行机制、Java平台（初学）

    初学JAVA,学一门语言不仅仅是学其语法,逻辑思维能力,还有每一门语言都有自己独特的一方面,所以才有那么多语言要学啊 = =,所以想要真的学好语言,其编译机制,运行机制多少也要涉猎一些啊.这是初学JA ...

  2. Vista 及后续版本的新线程池

    在上一篇的博文中,说了下老版本的线程池,在Vista之后,微软重新设计了一套线程池机制,并引入一组新的线程池API,新版线程池相对于老版本的来说,它的可控性更高,它允许程序员自己定义线程池,并规定线程 ...

  3. Redis Sentinel配置小记

    Sentinel是一个管理多个redis实例的工具,它可以实现对redis的监控.通知.自动故障转移.sentinel不断的检测redis实例是否可以正常工作,通过API向其他程序报告redis的状态 ...

  4. Visual Studio总是在重新生成项目？

    你是否曾经有过这种感觉:即使代码没有改变,Visual Studio也总是在重新生成项目? 我们可以生成一个项目,然后不做任何处理后再次生成,我们就可以看见--VS正在开始生成项目,而我的项目代码并没 ...

  5. EMMC与nand flash的区别【转】

    1.NAND Flash 是一种存储介质,要在上面读写数据,外部要加主控和电路设计. 2.eMMC是NAND flash+主控IC ,对外的接口协议与SD.TF卡类似:对厂家而言简化了电路设计,降低了 ...

  6. kafka中partition和消费者对应关系

    1个partition只能被同组的一个consumer消费,同组的consumer则起到均衡效果 消费者多于partition topic: test 只有一个partition 创建一个topic- ...

  7. zoj 3494:BCD Code

    Description Binary-coded decimal (BCD) is an encoding for decimal numbers in which each digit is rep ...

  8. Codeforces 833E Caramel Clouds

    E. Caramel Clouds time limit per test:3 seconds memory limit per test:256 megabytes input:standard i ...

  9. C++STL vector简单使用练习1

    #include <iostream> #include <vector> #include <numeric> using namespace std; int ...

  10. 状压dp入门第一题 poj3254

    题目链接 http://poj.org/problem?id=3254 转自http://blog.csdn.net/harrypoirot/article/details/23163485 #inc ...