1、为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。当前流行的 JavaScript 库有:jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS  DWR
2、jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如：
　　$("#test").html()   意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
　　这段代码等同于用DOM实现代码：
　　document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.  
 var $variable = jQuery 对象
 var variable = DOM 对象
jQuery 选择器
p选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
pjQuery 选择器的优点:
 简洁的写法  

//若网页中没有id=value的元素,浏览器会报错
  document.getElementById("username").value;
  //需要判断document.getElementById("username")是否存在
 if(document.getElementById("username")){
     var username=document.getElementById("username");
      alert(username.value);
   }else{    alert("没有该id元素");
   }
  //使用JQUERY处理即使不存在也不会报错
   var $username=$("#username");
 alert("^^^ "+$username.val());
//注意:在javaScript中函数返回值为空,表示false
  
  基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

p1、#id     用法: $(”#myDiv”);    返回值  单个元素的组成的集合

说明: 这个就是直接选择html中的id=”myDiv”

p2、Element       用法: $(”div”)     返回值  集合元素

说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a等等.

p3、class          用法: $(”.myClass”)      返回值  集合元素

说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

p4、*          用法: $(”*”)      返回值  集合元素

说明: 匹配所有元素,多用于结合上下文来搜索

p5、selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)    返回值  集合元素

说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素

p class=”myClass”

基本选择器示例：

pmini 的所有元素的背景色为 #FF0033
p改变元素名改变 id 为 one 的元素的背景色为 #0000FF
p改变 class 为为 <div> 的所有元素的背景色为 #00FFFF
p改变所有元素的背景色为 #00FF33
p改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF                                       
        层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

p1 、ancestor descendant

用法: $(”form input”) ;   返回值  集合元素

说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

p2、parent > child
用法: $(”form > input”) ;   
返回值 
集合元素

说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

p3、prev
+ next

用法: $(”label + input”) ;  
返回值 
集合元素

说明: 匹配所有紧接在 prev 元素后的 next 元素

p4、prev
~ siblings

用法: $(”form ~ input”) ;   
返回值 
集合元素

说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

注意:  (“prev ~ div”) 选择器只能选择
“# prev ” 元素后面的同辈元素; 而 jQuery
中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

层次选择器示例：

p改变 <body> 内所有 <div> 的背景色为 #0000FF
p改变 <body> 内子 <div> 的背景色为 #FF0033
p改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
p改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
p改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
 
过滤选择器
p过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
p按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
基础过滤选择器：
l1、:first
用法: $(”tr:first”) ;   返回值  单个元素的组成的集合

说明: 匹配找到的第一个元素

l2、:last
用法: $(”tr:last”)   返回值  集合元素

说明: 匹配找到的最后一个元素.与 :first 相对应.

l3、:not(selector)
用法: $(”input:not(:checked)”)返回值  集合元素

说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

l4、:even
用法: $(”tr:even”)   返回值  集合元素

说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

l5、: odd
用法: $(”tr:odd”) 返回值  集合元素

说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

l6、:eq(index)
用法: $(”tr:eq(0)”)    返回值  集合元素

说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

l7、:gt(index)
用法: $(”tr:gt(0)”)    返回值  集合元素
l说明: 匹配所有大于给定索引值的元素.
l8、:lt(index)
用法: $(”tr:lt(2)”)    返回值  集合元素 

说明: 匹配所有小于给定索引值的元素.

l9、:header(固定写法)
用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素

说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

l10、:animated(固定写法)   返回值  集合元素

说明: 匹配所有正在执行动画效果的元素

基础过滤选择器示例：

p改变第一个 div 元素的背景色为 #0000FF
p改变最后一个 div 元素的背景色为 #0000FF
p改变class不为 one 的所有 div 元素的背景色为 #0000FF
p改变索引值为偶数的 div 元素的背景色为 #0000FF
p改变索引值为奇数的 div 元素的背景色为 #0000FF
p改变索引值为大于 3 的 div 元素的背景色为 #0000FF
p改变索引值为等于 3 的 div 元素的背景色为 #0000FF
p改变索引值为小于 3 的 div 元素的背景色为 #0000FF

function cartoon(){//执行动画的方法

$("#mover").slideToggle("normal",cartoon);

}

cartoon();

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

p1、:contains(text)
用法:
$(”div:contains(’John’)”)    返回值  集合元素

说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

p2、:empty
用法: $(”td:empty”)   返回值  集合元素

说明: 匹配所有不包含子元素或者文本的空元素

p3、:has(selector)

用法:
$(”div:has(p)”).addClass(”test”)    返回值  集合元素

说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

p4、:parent
用法: $(”td:parent”)   返回值  集合元素

说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

内容过滤选择器示例：

p改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
p改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 #0000FF
p改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF
p改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF
p改变不含有文本 di; 的 div 元素的背景色

$("div:not(:contains('di'))").css("background","#FF0033");

可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素

p1、:hidden
用法: $(”tr:hidden”)  返回值  集合元素

说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input
type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

p2、:visible
用法: $(”tr:visible”)  返回值  集合元素

说明: 匹配所有的可见元素.

可见度过滤选择器示例：

p改变所有可见的div元素的背景色为 #0000FF
p选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF

选取所有的文本隐藏域, 并打印它们的值

增加css     div.visible{ display:none;}

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

p1、[attribute]
用法: $(”div[id]“) ;  返回值  集合元素

说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.

p2、[attribute=value]
用法:
$(”input[name='newsletter']“).attr(”checked”, true);    返回值  集合元素

说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.

p3、[attribute!=value]
用法:
$(”input[name!='newsletter']“).attr(”checked”, true);    返回值  集合元素

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.

p4、[attribute^=value]
用法:
$(”input[name^=‘news’]“)  返回值  集合元素

说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

p5、[attribute$=value]
用法:
$(”input[name$=‘letter’]“)  返回值  集合元素

说明: 匹配给定的属性是以某些值结尾的元素.

p6、[attribute*=value]
用法:
$(”input[name*=‘man’]“)   返回值  集合元素

说明: 匹配给定的属性是以包含某些值的元素.

p7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法:
$(”input[id][name$=‘man’]“)  返回值  集合元素

说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

属性过滤选择器示例：

p选取下列元素,改变其背景色为 #0000FF
p含有属性title 的div元素.
p属性title值等于"test"的div元素.
p属性title值不等于"test"的div元素(没有属性title的也将被选中).
p属性title值 以"te"开始 的div元素.
p属性title值 以"est"结束 的div元素.
p属性title值 含有"es"的div元素.
p选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.
子元素过滤选择器
p1、:nth-child(index/even/odd/equation)
用法: $(”ul
li:nth-child(2)”)   返回值  集合元素

说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.

p2、:first-child
用法: $(”ul
li:first-child”)    返回值  集合元素

说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

p3、:last-child
用法: $(”ul
li:last-child”)      返回值  集合元素

说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

p 4、:
only-child
用法: $(”ul
li:only-child”)   返回值  集合元素

说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

pnth-child() 选择器详解如下：
 (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
子元素过滤选择器示例：
p选取下列元素,改变其背景色为 #0000FF
p每个class为one的div父元素下的第2个子元素.
p每个class为one的div父元素下的第一个子元素
p每个class为one的div父元素下的最后一个子元素
p如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

p1、:enabled
用法: $(”input:enabled”)    返回值  集合元素

说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

p2、:disabled
用法: $(”input:disabled”)    返回值  集合元素

说明: 匹配所有不可用元素.与上面的那个是相对应的.

p3、:checked
用法: $(”input:checked”)   返回值  集合元素

说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.

p4、:selected
用法: $(”select
option:selected”)   返回值  集合元素

说明: 匹配所有选中的option元素.

表单对象属性过滤选择器示例：

p利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
p利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
p利用 jQuery 对象的 length 属性获取多选框选中的个数
p利用 jQuery 对象的 text() 方法获取下拉框选中的内容

$("select option:selected").each(function(){

alert($(this).text());

});

表单选择器

l1、:input
用法: $(”:input”) ;   返回值  集合元素

说明:匹配所有 input, textarea, select 和 button
元素

l2、:text
用法: $(”:text”) ;  返回值  集合元素

说明: 匹配所有的单行文本框.

l3、:password
用法: $(”:password”) ; 返回值  集合元素

说明: 匹配所有密码框.

l4、:radio
用法: $(”:radio”) ; 返回值  集合元素

说明: 匹配所有单选按钮.

l5、:checkbox
用法: $(”:checkbox”) ; 返回值  集合元素

说明: 匹配所有复选框

l6、:submit
用法: $(”:submit”) ;   返回值  集合元素

说明: 匹配所有提交按钮.

l7、:image
用法: $(”:image”)   返回值  集合元素

说明: 匹配所有图像域.

l8、:reset
用法: $(”:reset”) ;  返回值  集合元素

说明: 匹配所有重置按钮.

l9、:button
用法: $(”:button”) ;  返回值  集合元素

说明: 匹配所有按钮.这个包括直接写的元素button.

l10、:file
用法: $(”:file”) ;  返回值  集合元素

说明: 匹配所有文件域.

l11、:hidden
用法: $(”input:hidden”) ; 返回值  集合元素

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.

注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

jQuery 中的事件 --  加载 DOM

p在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

可以用$(window).load(function{})  $().ready();

流行的JavaScript库 ——jQuery的更多相关文章

  1. [Web 前端] 流行的JavaScript库 ——jQuery

    cp : https://www.cnblogs.com/zhoushihui/p/5141767.html   1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. ...

  2. 最流行的JavaScript库jQuery不再支持旧版IE

    直到JQuery2.0的发布,流行的jQuery JavaScript库到了一个重要里程碑.2.0版本比前任版本在大小上缩减了12%,但是更大的新闻是,jQuery 2.0不在对IE6,7,8三个版本 ...

  3. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  4. JavaScript - 库 jQuery

    测试 JavaScript 框架库 - jQuery 引用JQuery 如需测试JavaScript库,您需要在网页中引用它. 为了引用某个库,请使用<script>标签,其src属性设置 ...

  5. 19个很有用的 JavaScript库推荐

    流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能丰富,加上它们众多的插件,几乎能实现任何你需要的功能 然而需 ...

  6. 为新项目添彩的 10+ 超有用 JavaScript 库

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  7. HTML、CSS、Javascript、jQuery、Xml

    HTML HTML简介 Hyper Text Markup Language (超文本标记语言)简写:HTML.通过标签来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加 ...

  8. 表单美化-原生javascript和jQuery单选按钮（兼容IE6）

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  9. jQuery与javascript库

    [jquery-javascript库] 为了简化javascript的开发,诞生了javascript程序库,他封装了很多预定的对象和实用函数.下面是几种流行的javascript程序库:proto ...

随机推荐

  1. tushare

    tushare TuShare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据, ...

  2. UML大战需求分析——阅读笔记06

    状态机图和活动图在样子比较相似,但状态机图是用来为对象的状态及造成状态改变的事件建模.我们大二学习UML统一建模语言状态机图模块时了解到,UML的状态机图主要用于建立对象类或对象的动态行为模型,描述系 ...

  3. PHP7函数大全（4553个函数）

    转载来自: http://www.infocool.net/kb/PHP/201607/168683.html a 函数 说明 abs 绝对值 acos 反余弦 acosh 反双曲余弦 addcsla ...

  4. 【Cocos2d-x for WP8 学习整理】（5）文字显示全整理

    学习 Cocos2d-x 有一阵了,现在要做个小东西,第一步就遇到了文字展示的问题,于是想把可能遇到的问题统统整理一下.这一部分也不局限于wp8,全平台应该都是一个解决方案. 先在脑袋里大致想了一下, ...

  5. NoSql数据库初探-mongoDB环境搭建

    NoSQL数据库一改关系型数据库的缺点,更容易的集成.分布式.无模式.故障恢复等特点,正在一步步餐食关系型数据库的市场,作为一个与时俱进的码农了解一下新技术是必须的,尤其是在读了<NoSql精粹 ...

  6. asterisk 通话噪音,自动挂断,回声等情况

    打开配置文件:cd /etc/asterisk/ vim chan_dahdi.conf 1: busydetect:忙音检测,如果开启,Asterisk会拨号尝试或通话中分析在线的音频,从而尝试识别 ...

  7. oracle11g导出空表的数据库设置

    1,找到那些表是空表: select table_name from user_tables where NUM_ROWS=0; 2,设置对应的空表,分配空间: alter table TableNa ...

  8. 我理想中的父母(The Ideal Parents In My Heart)

    Parents are the first teachers in children's life, and people all know the great importance exactly ...

  9. Angular内置指令（一）

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  10. 从OOP的角度看Golang

    资料来源 https://github.com/luciotato/golang-notes/blob/master/OOP.md?hmsr=toutiao.io&utm_medium=tou ...

热门专题

VMware 支持virtio吗
echarts 折线图头部信息
ensp设备栏不见了
python从外部传入参数
untiy 动画 FootIK
腾讯云shadownsocks
vue 应用部署多级路由js文件加载失败
python 变量 列表 項
camunda 网页bpm
关闭所有的layer.open
方法的定义不能产生嵌套包含关系
java opencv 锐化
必须以字母或数字开头 正则 JS
循环的ref调用子组件方法问题
termux ssh连接
shell 数组 赋值 中文
matlab图像特征提取主成分分析
tesseract 中文乱码 centos7 utf8
ubuntu视频服务器搭建
sql语句删除相同name的数据