一、基本简介

1、下载：http://jquery.com提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。

　　　　　（ 目前最新的版本jquery-1.3.2.min.js文件只有55.9 KB ）

2、引用：<script src="jquery.min.js" ></script>

　　将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。

3、第一个jQuery程序

 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

 <script>

             $(document).ready(function(){  

     alert("Hello World!");

             });

 </script>

二、jQuery对象和DOM对象

1、jQuery 对象（通过 jQuery 包装 DOM 对象后产生的对象）
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html();
建议约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.  
var $variable = jQuery 对象
var variable = DOM 对象

jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

2、jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
　　$("#msg")[0]      
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
　　$("#msg").get(0)

3、DOM 对象转成 jQuery 对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来， 就可以获得一个 jQuery 对象. 例如：

　　$(document.getElementById(“msg”))

转换后就可以使用 jQuery 中的方法了

4、jQuery对象与DOM对象的转换举例

　　$("#msg").html();

　　$("#msg")[0].innerHTML;

　　$("#msg").eq(0)[0].innerHTML;

　　$("#msg").get(0).innerHTML;

三、jQuery 选择器

1、jQuery 选择器的优点:

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

1）简洁的写法

2）完善的事件处理机制：

2、基本选择器

3、基本选择器示例

1）改变 id 为 one 的元素的背景色为 红色
　　$("#one").css("backgroundColor","red");
2）改变元素名为 <p> 的所有元素的背景色为 # bbffaa，字体颜色为红色
　　$("p").css({color:"red",backgroundColor:"#bbffaa"});
3）改变第一个<p>元素的背景色为红色
　　$("p").eq(0).css("backgroundColor","red");
4）改变所有<h1>元素和 id 为 one 的元素的背景色为 # bbffaa
　　$("h1,#one").css("backgroundColor","#bbffaa");

4、层次选择器示例

1）改变 <body> 内所有 <div> 的背景色为 # bbffaa
　　$(“body div")
2）改变 <body> 内子 <div> 的背景色为 # bbffaa
　　$(“body>div")
3）改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa
　　$("#one+div")
4）改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # bbffaa
　　$("#two~div")
5）改变 id 为 two 的元素所有 <p> 兄弟元素的背景色为 # bbffaa

　　$("#two"). siblings("p")

四、过滤选择器

1、基本过滤选择器

1）

2）基本过滤选择器示例

　　a、改变第一个 div 元素的背景色为 # bbffaa
　　　　$("div:first")
　　b、改变id不为 one 的所有p元素的背景色为 # bbffaa
　　　　$("p:not('#one')")
　　c、改变索引值为偶数的 tr元素的背景色为 # bbffaa
　　　　$(“tr:even")
　　d、改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa
　　　　$(“p:gt(3):odd")
　　e、改变所有的标题元素的背景色为 # bbffaa
　　　　$(":header")

　　h、改变当前正在执行动画的所有元素的背景色为 # bbffaa

　　　　

2、内容过滤选择器

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

2）内容过滤选择器示例

　　改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa
　　　　$("p:contains(di)")
　　改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa

　　　　$("div:empty")
　　改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa
　　　　$("p:has(.mini)")
　　改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa

　　　　$("div:parent")

3、可见性过滤选择器

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

　可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden 之类的元素。

2)可见性过滤选择器示例

　　改变所有可见的div元素的背景色为 # bbffaa

　　　　$("div:visible")
　　选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa

　　　　$("：hidden").css()
　　选取所有的文本隐藏域, 并打印它们的值sdf

　　　　

4、属性过滤选择器

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

2）属性过滤选择器示例

　　选取下列元素,改变其背景色为 # bbffaa
　　含有属性title 的div元素.
　　属性title值等于"test"的div元素.
　　属性title值不等于"test"的div元素(没有属性title的也将被选中).
　　属性title值 以"te"开始 的div元素.
　　属性title值 以"est"结束 的div元素.
　　属性title值 含有"es"的div元素.
　　选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.

5、子元素过滤选择器

1）

2）子元素过滤选择器示例

nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

选取下列元素,改变其背景色为 # bbffaa
每个class为one的div父元素下的第2个子元素.
每个class为one的div父元素下的第一个子元素
每个class为one的div父元素下的最后一个子元素
如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

6、表单对象属性过滤选择器

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

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

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

7、表单选择器

jQuery的使用的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  10. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. Python学习笔记之条件、循环和其他语句

    一.函数导入 1.为模块提供别名 >>> import math as foobar #设置math 别名为foobar >>> foobar.sqrt(4) 显示 ...

  2. WPF依赖属性DependencyProperty

    写在之前: 依赖属性算是WPF醉醉基础的一个组成了.平时写代码的时候,简单的绑定很轻松,但是遇到复杂的层次比较多的绑定,真的是要命.所以,我觉得深刻认识依赖属性是很有必要的.本篇只是个人学习的记录,学 ...

  3. JAVA08多态之课程问题解决

    课后作业一:接口多态:使用接口代替抽象基类 1.源代码: package zoo4; import java.util.Vector; public class Zoo2 { public stati ...

  4. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  5. shell算数运算

    ((i=$j+$k))    等价于 i=`expr $j + $k`((i=$j-$k))     等价于   i=`expr $j -$k`((i=$j*$k))     等价于   i=`exp ...

  6. phonegap + xcode5.0.2 配置开发环境

    phonegap官网:  http://phonegap.com/ 第一部:安装nodejs 安装地址:http://nodejs.org/ 安装phoneGap 官网下载http://phonega ...

  7. java集合中的传值和传引用

    在学习java集合过程中发现了传值和传引用的区别: 我们来看下面两句话 ●java集合就像一种容器,我们可以把多个对象(实际上是对象的引用),丢进该容器.(来自疯狂java讲义) ●当使用Iterat ...

  8. CALayer 2 详解 -----转自李明杰

    CALayer2-创建新的层   本文目录 一.添加一个简单的图层 二.添加一个显示图片的图层 三.为什么CALayer中使用CGColorRef和CGImageRef这2种数据类型,而不用UICol ...

  9. 关于arcengine中geoprocessor使用的困惑

    最近在实验一个小功能,就是用arcengine10.1做一个小程序,将point类型的shp转换为polyline类型的shp文件,用到的工具是pointstoline,但就是在设置input_fea ...

  10. 'scrapyd-deploy' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

    在windows上使用scrapyd-client 安装后,并不能使用相应的命令'scrapyd-deploy' 需要在"C:\Python27\Scripts" 目录下 增加sc ...