概述

终于，我开始了我的jQuery学习！我觉得我不能再等了。我必须在学习原生JavaScript的同时学习jQuery

什么是jQuery？

JQuery是一个快速简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的目的是“少写多做”，即提倡少写代码，多做事。它封装了JavaScript的常用功能代码，提供了简单的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特点可以概括为：独特的链式语法和简洁明了的多功能界面；有一个高效灵活的css选择器，并且可以扩展CSS选择器；有方便的插件扩展机制和丰富的插件。JQuery兼容各种主流浏览器，如IE 6.0、FF 1.5、Safari 2.0、Opera 9.0等。(来自百度-_-)

JQuery对象和DOM对象

我们写脚本的时候，可能会同时使用原生的JavaScript和jQuery，所以会出现一些问题。要解决这些问题，首先要知道jQuery对象和DOM对象

DOM对象：通过例如getElementById方法获得的DOM树中的元素是一个DOM对象

jQuery对象：通过JQuery包装DOM对象后生成的对象

注意：jQuery对象和DOM对象不能相互使用任何方法

//错误$('div ')。innerHTML//错误document . getelementsbytagname(' div ')[0]。html()；JQuery对象和DOM对象可以相互转换

有两种方法可以将jQuery对象转换为DOM对象：

1、[指数]

var $ div=$(' div ')；//jQuery对象var div=$ div[0]；//DOM对象2，get(索引)

var $ div=$(' div ')；//jQuery对象var div=$ div . get(0)；//DOM对象有一种方法可以把DOM对象转换成jQuery对象：$(DOM对象)

var div=document . getelementsbytagname(' div ')[0]；//DOM对象var $ div=$(div)；//jQuery对象jQuery选择器

jQuery中的选择器完全继承了CSS的风格

一个个看着他们

基本选择器

更改id为div1的所有div的背景颜色

$('#div1 ')。css('背景'，' # bbffaa ')；

用类1更改所有p标签和div的背景色

$('p，一个')。css('背景'，' # bbffaa ')；

层次选择器

选择div中的所有跨度元素

$(“div span”)；

选择div下的基本名称是span的子元素

$(“div span”)；

选择类作为一个的下一个div同级元素

$('.一个div ')；

类为1后，选择所有div同级元素

$('.one ~ div’)；

滤波器选择器

1.基本过滤器选择器

在所有div元素中选择第一个div元素

$(' div : first ')；

选择类别不是1的div元素

$('div:not(。一)’)；

选择带偶数索引的div元素

$(' div : even ')；

选择索引等于2的div元素

$(“div : eq(2)”)；

选择索引大于2的div元素

$(“div : gt(2)”)；

选择所有标题元素，如h1、h2等

$(' : header ')；

选择当前正在执行动画的所有元素

$(' : animated ')；

选择获取当前焦点的元素

$(' : focus ')；

2.内容过滤器选择器

选择文本为“持久性”的div元素

$(“div : contains”(“consistent”))；

选择不包含子元素或文本的div元素

$(“div : empty”)；

用p元素选择div元素

$(“div : has(p)”)；

选择包含子元素或文本的元素

$(“div : parent”)；

3.可见性过滤器选择器

选择所有不可见的元素。包括输入类型='隐藏'/，div style=' display: none '和div style='overflow:hidden '

$(' : hidden ')；

选择所有可见的div元素

$(“div : visible”)；

4.属性过滤器选择器

选择具有id属性的元素

$(' div[id]')；

选择id等于myId的div元素

$(' div[id=' myId ']')；

选择Id值不等于我的id的div元素

$('div[id！=' myId ']')；

选择id值以my开头的div元素

$('div[id^='my']')；

选择id值以my结尾的div元素

$(' div[id $=' my ']')；

选择id值包含my的div元素

$(' div[id *=' my ']')；

选择属性标题等于en或以en为前缀，后跟连字符“-”的元素。

$(' div[title |=' en ']')；

选择div元素，其值在属性标题中用空格分隔，并包含字符en

$(' div[title ~=' en ']')；

选择属性id和属性标题前缀为en的p元素

$(' p[id][title |=' en ']')；

5、子元素过滤器

选择类为1的div父元素下的第二子元素

$(“div . one : th-child(2)”)；

选择类为1的div父元素下的第一个子元素

$(' div . one : first-child ')；

选择ul中唯一的子元素li元素

$(“ul Li :独生子女”)；

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

选择表单中id为“form1”的所有可用元素

$(' # form 1: enabled ')；

选择id为“form1”的表单中所有不可用的元素

$(' # form 1: disabled ')；

选择所有选定的输入元素

$(“input 3360 checked”)；

选择所有选定的选项元素

$(“选择选项： selector”)；

表单选择器

选择所有输入、文本区域、选择和按钮元素

$(' : input ')；

选择所有单行文本框

$(' : text ')；

选择所有不可见的元素

$(' : hidden ')；

其他的选择方式可以用文字来理解(比如提交就是选择所有的提交按钮)，就不再赘述了。

参考文献：夏普jQuery(第二版)//www . JB 51 . net/books/92918 . html

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！