jQuery相关知识总结

时间：2021-04-23 16:04:47

1 encodeURIComponent(city)处理js传值乱码问题

2 总体概述

以后项目如果没有特殊情况，一般采用jQuery作为最基础的公共底层库。

另外对于前端的javascript相关的知识还是需要有所了解，可以加深对框架的理解

3 jQuery相关知识点介绍

以下功能方面的描述都是基于jQuery1.8.0

3.1 浏览器类型的判断

早版本的jQuery提供jQuery.browser，jQuery.browser.version这两个特性来判断浏览器的类型和版本，但是从jQuery1.9开始这两个特性被移出，如果项目需要移植到高版本jQuery(1.9+)，可以使用插件jquery-migrate。

废弃的主要原因是它基于navigator.userAgent[声明了浏览器用于 HTTP 请求的用户代理头的值]来判断用户的浏览器类型等信息，但是这个信息并不准确，容易被伪造欺骗。

可以使用属性jQuery.support，即浏览器支持的html或者css特性来进行相关的判断，但更加推荐使用第三方的类库Modernizr来替代jQuery.support

3.2 jQuery选择器

主要参考资料< jQuery设计思想>

所有jQuery选择器选择出来的都是jQuery对象。

3.2.1 jQuery对象是什么

一个jQuery对象类似一个数组，它里面包含很多dom对象，一个jQuery对象中具体包含多少dom对象依赖于你的选择器。jQuery对象中的这些dom对象也通常称为被选择的元素或者匹配的元素。

3.2.2 常见的一些jQuery选择器

选择器

实例

选取

*

$("*")

所有元素

#id

$("#lastname")

id="lastname" 的元素

.class

$(".intro")

所有 class="intro" 的元素

element

$("p")

所有 <p> 元素

.class.class

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素

:odd

$("tr:odd")

所有奇数 <tr> 元素

:eq(index)

$("ul li:eq(3)")

列表中的第四个元素（index 从 0 开始）

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不为空的 input 元素

:header

$(":header")

所有标题元素 <h1> - <h6>

:animated

所有动画元素

:contains(text)

$(":contains('W3School')")

包含指定字符串的所有元素

:empty

$(":empty")

无子（元素）节点的所有元素

:hidden

$("p:hidden")

所有隐藏的 <p> 元素

:visible

$("table:visible")

所有可见的表格

s1,s2,s3

$("th,td,.intro")

所有带有匹配选择的元素

[attribute]

$("[href]")

所有带有 href 属性的元素

[attribute=value]

$("[href='#']")

所有 href 属性的值等于 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 属性的值不等于 "#" 的元素

[attribute$=value]

$("[href$='.jpg']")

所有 href 属性的值包含以 ".jpg" 结尾的元素

:input

$(":input")

所有 <input> 元素

:text

$(":text")

所有 type="text" 的 <input> 元素

:password

$(":password")

所有 type="password" 的 <input> 元素

:radio

$(":radio")

所有 type="radio" 的 <input> 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 <input> 元素

:submit

$(":submit")

所有 type="submit" 的 <input> 元素

:reset

$(":reset")

所有 type="reset" 的 <input> 元素

:button

$(":button")

所有 type="button" 的 <input> 元素

:image

$(":image")

所有 type="image" 的 <input> 元素

:file

$(":file")

所有 type="file" 的 <input> 元素

:enabled

$(":enabled")

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被选取的 input 元素

:checked

$(":checked")

所有被选中的 input 元素

3.2.3 dom对象和jQuery对象之间的转换

jQuery对象中获取第一个dom对象

$("selector")[0] === $("selector").get(0)

将dom对象转换为jQuery对象

var fooDom = document.getElementById("foo");

$(fooDom);

3.2.4 如何判断jQuery对象是否为空

if ($( "#myDiv" ).length) {

$("#myDiv").show();

}

当然有时候也并不需要判断一个jQuery对象是否为空

$( "#myDiv" ).show();

当有id为myDiv的元素就显示，没有的时候什么也不做，也不会出现错误

3.3 常见的jQuery的一些方法

3.3.1 工具类方法

$.trim()

去除字符串两端的空格。

$.each()

遍历一个数组或对象。

$.inArray()

返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。

$.grep()

返回数组中符合某种标准的元素。

$.extend()

将多个对象，合并到第一个对象。

$.makeArray()

将对象转化为数组。

$.type()

判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

$.isArray()

判断某个参数是否为数组。

$.isEmptyObject()

判断某个对象是否为空（不含有任何属性）。

$.isFunction()

判断某个参数是否为函数。

$.isPlainObject()

判断某个参数是否为用"{}"或"new Object"建立的对象

$.support()

判断浏览器是否支持某个特性。

3.3.2 改变结果集的方法

jQuery提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

　 $('div').has('p'); // 选择包含p元素的div元素

　　$('div').not('.myClass'); //选择class不等于myClass的div元素

　　$('div').filter('.myClass'); //选择class等于myClass的div元素

　　$('div').first(); //选择第1个div元素

　　$('div').eq(5); //选择第6个div元素

有时候，需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

　　$('div').next('p'); //选择div元素后面的第一个p元素

　　$('div').parent(); //选择div元素的父元素

　　$('div').closest('form'); //选择离div最近的那个form父元素

　　$('div').children(); //选择div的所有子元素

　　$('div').siblings(); //选择div的同级元素

3.3.3 元素的操作：取值和赋值

使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

　　$('h1').html(); //html()没有参数，表示取出h1的值

　　$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

　

.html()

取出或设置html内容

.text()

取出或设置text内容

.attr()

取出或设置某个属性的值

.width()

取出或设置某个元素的宽度

.height()

取出或设置某个元素的高度

.val()

取出某个表单元素的值

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。

3.3.4 元素的操作：移动

提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到想要的位置。

假定选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

　　$('div').insertAfter($('p'));

第二种方法是使用.after()，把p元素加到div元素前面：

　　$('p').after($('div'));

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

　　

.insertAfter()和.after()

在现存元素的外部，从后面插入元素

.insertBefore()和.before()

在现存元素的外部，从前面插入元素

.appendTo()和.append()

在现存元素的内部，从后面插入元素

.prependTo()和.prepend()

在现存元素的内部，从前面插入元素

3.3.5 元素的操作：复制、删除和创建

除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。

n 复制元素使用.clone()。

n 删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

n 清空元素（删除所有的子元素，但是不删除该元素自身）使用.empty()。

3.4 jQuery事件处理

jQuery的事件直接绑定在网页元素之上。

$('p').click(function(){

　　　　alert('Hello');

　　});

3.4.1 jQuery中主要事件方法

.blur()

表单元素失去焦点。

.change()

表单元素的值发生变化

.click()

鼠标单击

.dblclick()

鼠标双击

.focus()

表单元素获得焦点

.focusin()

子元素获得焦点

.focusout()

子元素失去焦点

.hover()

同时为mouse enter和mouse leave事件指定处理函数

.keydown()

按下键盘（长时间按键，只返回一个事件）

.keypress()

按下键盘（长时间按键，将返回多个事件）

.keyup()

松开键盘

.load()

元素加载完毕

.mousedown()

按下鼠标

.mouseenter()

鼠标进入（进入子元素不触发）

.mouseleave()

鼠标离开（离开子元素不触发）

.mousemove()

鼠标在元素内部移动

.mouseout()

鼠标离开（离开子元素也触发）

.mouseover()

鼠标进入（进入子元素也触发）

.mouseup()

松开鼠标

.ready()

DOM加载完成

.resize()

浏览器窗口的大小发生改变

.scroll()

滚动条的位置发生变化

.select()

用户选中文本框中的内容

.submit()

用户递交表单

.toggle()

根据鼠标点击的次数，依次运行多个函数

.unload()

用户离开页面

3.4.2 如何增加和移除事件

采用bind方法，使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数。

　$('input').bind(

　　　　'click change', //同时绑定click和change事件

　　　　function() {

　　　　　　alert('Hello');

　　　　}

　　);

.unbind()用来解除事件绑定。

$('p').unbind('click');

3.4.3 事件对象(event object)解析

所有的事件处理函数，都可以接受一个事件对象（event object）作为参数，比如下面例子中的e：

　　$("p").click(function(e) {

　　　　alert(e.type); // "click"

　　});

事件对象有一些很有用的属性和方法：

event.pageX

事件发生时，鼠标距离网页左上角的水平距离

event.pageY

事件发生时，鼠标距离网页左上角的垂直距离

event.type

事件的类型（比如click）

event.which

按下了哪一个键

event.data

在事件对象上绑定数据，然后传入事件处理函数

event.target

事件针对的网页元素

event.preventDefault()

阻止事件的默认行为（比如点击链接，会自动打开新页面）

event.stopPropagation()

停止事件向上层元素冒泡

在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

　　$('a').click(function(e) {
if ($(this).attr('href').match('evil')) { //如果确认为有害链接

　　　　　　e.preventDefault(); //阻止打开

　　　　　　$(this).addClass('evil'); //加上表示有害的class

　　　　}

　　});

3.4.4 事件的自动触发

有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

　　$('a').click();

　　$('a').trigger('click');

4 不同浏览器的js功能差异的jQuery替代方法

一般来说，除了IE6/IE7等浏览器和标准模型差别比较大之外，大部分浏览器对于标准支持的还算比较完整。另外编写javascript脚本，一般是先使用标准的方法[前提是需要知道哪些是标准的方式!!]，只有当浏览器没有实现标准的方法，或者实现的功能与标准的方法有差异时，才需要考虑浏览器兼容性方面的问题。

上次讨论中一些问题的总结，参考王文聪整理的<JS各浏览器差异兼容问题整理.docx>基本上都可以用jQuery对应的方法进行替换：

n 2.1集合类对象问题

标准的访问集合类对象就是采用[]

n 2.2 Id大小写区分

一般的规范中大小写就是有区分的

n 2.3 const问题

标准中就是用var来定义所有的变量

n 2.4获取HTML元素、属性

标准的方法document.getElementById根据Id获取元素,通过el.getAttribute(‘attrName’)来获取属性。

jQuery中对应的方法:$(‘#myDiv‘)和 $(‘#myDiv’).attr(‘attrName’);

n 2.5获取元素的class属性

标准的方法为: document.getElementById('header').className

jQuery中的方法：$(‘#header’).attr(‘class’);

n 2.6获取label标签的for属性

jQuery：$('#id_label_pwd').attr('for')

n 2.7动态事件绑定

参考jQuery中事件绑定相关,bind/unbind

n 2.8 childNodes在FF中和IE的区别

jQuery:$(‘area1’).children()

n 2.9 window.event

参考jQuery中事件处理，如果jQuery中没有对应的事件，可以使用采用兼容的方式:

E = e || window.event;

n 2.10 HTML对象的id作为对象名的问题

在规范中禁止这么干

n 2.11变量名与某HTML对象id相同的问题

在规范中禁止这么干

n 2.12 event.x与event.y问题

如果是使用jQuery的事件注册方法，会有pageX和pageY

n 2.13 event.srcElement问题

如果使用jQuery的事件注册方法，会有target

n 2.14 window.location.href问题

不需要考虑旧的浏览器，统一使用window.location.href

n 2.15 innerText的局限

jQuery: $('#id_span_test').text('abcd');

n 2.16.1访问frame对象

标准:document.getElementById(‘id_iframe_test’);

n 2.16.2切换frame内容

就是如何访问iframe的父窗口

直接使用parent.document

n 2.17 body对象

实际中有什么区别吗？统一采用 $(document).ready(function(){})

n 2.18 input.type元素属性

IE中的type为只读属性，如果动态修改会出现问题。

参考: change type of input field with jQuery

n 2.19 css“float”属性

jQuery: $('#id_float').css('float')

n 2.20元素的计算样式

jQuery: $('#promptDiv').css('top',100);

n 2.21上传控件样式

有相关的文件上传的插件,如jQuery-File-Upload，uploadify等

n 2.22文本框的统一过滤

jQuery中有change事件，可以监测文本框中内容的变化

另外对于输入提示jQuery也有相关的插件支持，

如JQuery实现智能输入提示（仿机票预订网站），jQuery Autocomplete, select2等

5 jQuery插件机制

毫无疑问，jQuery的扩展机制是jQuery得以广泛应用的主要支撑技术之一。基本上现在Web上开发所需要的一些通用的组件都有对应的jQuery的插件。官方的jQuery的插件库地址为: plugins.jquery.com。但是由于UI方面的插件各种样式千差万别，风格都不统一，因此jQuery官方针对UI专门开发了UI插件库，但是它只实现了一些基本的UI组件。

jQuery的扩展有两类：一类是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一类是对象级别的插件开发，即给jQuery对象添加方法。

5.1 类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.ajax()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

5.1.1 添加新的全局函数

jQuery.foo = function () {

alert('This is a test. This is only a test.');

};

jQuery.bar = function (param) {

alert('This function takes a parameter, which is "' + param + '".');

};

调用时和一个函数的一样的:

jQuery.foo();

jQuery.bar();

或者$.foo();$.bar('bar');

5.1.2 使用jQuery.extend(object)

jQuery.extend({

foo: function () {

alert('This is a test. This is only a test.');

},

bar: function (param) {

alert('This function takes a parameter, which is "' + param + '".');

}

});

5.1.3 使用命名空间

虽然在jQuery命名空间中，禁止使用了大量的javascript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {

foo: function () {

alert('This is a test. This is only a test.');

},

bar: function (param) {

alert('This function takes a parameter, which is "' + param + '".');

}

};

//采用命名空间的函数仍然是全局函数

//调用时采用的方法

$.myPlugin.foo();

$.myPlugin.bar('baz');

5.1.4 总结

如果是想基于类的方式增加静态的方法，推荐使用命名空间的方式，即：

jQuery.dyrPlugin={}

5.2 对象级别的插件开发

5.2.1 基本扩展方式

(function ($) {

$.fn.pluginName = function () {

// Our plugin implementation code goes here.

};

})(jQuery);

这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？

  1. 避免全局依赖。
  2. 避免第三方破坏。
  3. 兼容jQuery操作符'$'和'jQuery '

这段代码在被解析时会形同如下代码：

var jq = function($) {

// Code goes here

};

jq(jQuery);

5.2.2 在JQuery命名空间下声明插件名字

$.fn.hilight = function () {

// Our plugin implementation code goes here.

};

//插件可以这样被调用：

$('#myDiv').hilight();

5.2.3 接受options参数以控制插件的行为，暴露插件的默认设置

// plugin definition

$.fn.hilight = function(options) {

// Extend our default options with those provided.

// Note that the first arg to extend is an empty object -

// this is to keep from overriding our "defaults" object.

var opts = $.extend({}, $.fn.hilight.defaults, options);

// Our plugin implementation code goes here.

};

// plugin defaults - added as a property on our plugin function

$.fn.hilight.defaults = {

foreground: 'red',

background: 'yellow'

};

现在使用者可以包含像这样的一行在他们的脚本里：

//这个只需要调用一次，且不一定要在ready块中调用

$.fn.hilight.defaults.foreground = 'blue';

接下来可以像这样使用插件的方法，结果它设置蓝色的前景色：

$('#myDiv').hilight();

5.2.4 适当的暴露一些函数

定义一个名叫"format"的函数来格式化高亮文本，默认的format方法的实现部分在hilight函数下面。

// plugin definition

$.fn.hilight = function(options) {

// iterate and reformat each matched element

return this.each(function() {

var e = $(this);

// ...

var markup = e.html();

// call our format function

markup = $.fn.hilight.format(markup);

e.html(markup);

});

};

// define our format function

$.fn.hilight.format = function(txt) {

return '<strong>' + txt + '</strong>';

};

5.2.5 保持私有函数的私有性

函数一旦被暴露，任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果不能肯定是否暴露特定的函数，那么就不暴露该函数。

怎么定义更多的函数而不暴露实现呢？这就是闭包的功能。添加另外一个“_debug”函数到插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包，将包装整个插件定义在一个函数中。

(function ($) {

// plugin definition

$.fn.hilight = function (options) {

_debug(this);

// ...

};

// private function for debugging

function _debug(obj) {

if (window.console && window.console.log)

window.console.log('hilight selection count: ' + obj.size());

};

//  ...

})(jQuery);

5.2.6 最终完整实例

// 创建一个闭包

(function($) {

// 插件的定义

$.fn.hilight = function(options) {

_debug(this);

// build main options before element iteration

var opts = $.extend({}, $.fn.hilight.defaults, options);

// iterate and reformat each matched element

return this.each(function() {

var e = $(this);

// update element styles

e.css({

backgroundColor: opts.background,

color: opts.foreground

});

var markup = e.html();

// call our format function

markup = $.fn.hilight.format(markup);

e.html(markup);

});

};

// 私有函数：debugging

function _debug($obj) {

if (window.console && window.console.log)

window.console.log('hilight selection count: ' + $obj.size());

};

// 定义暴露format函数

$.fn.hilight.format = function(txt) {

return '<strong>' + txt + '</strong>';

};

// 插件的defaults

$.fn.hilight.defaults = {

foreground: 'red',

background: 'yellow'

};

// 闭包结束

})(jQuery);

6 基于JQuery的通用功能需求

待补充

7 参考资料

  1. 如何做到 jQuery-free
  2. jQuery常见问题FAQ
  3. jQuery设计思想
  4. jQuery中的编程范式
  5. jQuery诞生记-原理与机制
  6. Javascript 性能优化的一点技巧
  7. IE中支持的判断IE版本的条件表达式
  8. 深入理解浏览器兼容性模式
  9. jQuery插件开发全解析
  10. Plugins

jquery最常用经典知识总结

jquery知识总结

-- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

-- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

** jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——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能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

******************************************************************************************

---jquery函数与DOM函数：

window.onload=function(){

var username=document.getElementById("username");

alert(username.value);

};

相当于：

$(document).ready(function(){

var $username=$("#username"); //$username 是一个JQUERY对象

alert($username.val());

});

---jquery对象向dom对象转化

方法一:通过[index]方法,将JQuery对象转化为DOM对象

var username=$username[0]; //username是一个DOM对象

alert("^^^ "+username.value);

方法二:通过get(index),将jQuery对象转化为DOM对象

var username=$username.get(0);

alert("*** "+username.value);

---dom转化为JQUery对象 $(DOM对象)

var username=document.getElementById("username");

var $username=$(username);

** var $username=$("#username") // 通过元素的id获取对组件的引用

** 等价 var username=document.getElementById("username");

注意:在javaScript中函数返回值为null表示false

*** 当id不在时,采用DOm处理处理会显示错误

window.onload=function(){

if(document.getElementById("username")){

var username=document.getElementById("username");

alert(username.value);

}else{

alert("没有该ID属性")

}

};

*** 当id不在时,采用Jquery 处理不会显示错误

$(document).ready(function(){

var $username=$("#username");

alert($username.val());

});

************************************************************************************

---jquery中关于样式表的方法：

--运用属性来添加和修改样式表：

$("#one").attr("class","one")

--addClass方法添加样式表：

$("#one").addClass("one");

--toggleClass切换样式：

$("#one").toggleClass("mini");

--removeClass删除样式表：

$("#one").removeClass();//删除全部的样式表

$("#one").removeClass("one");//删除指定的样式表

--判断是否含有样式，返回true或 false

$("#one").hasClass("one")；

***************************************************************************************

---jquery中关于克隆的方法：

clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

clone(true): 复制元素的同时也复制元素中的的事件

--只吉勤克隆元素不克隆事件

$("p").clone().appendTo($("button"))

--克隆元素又吉隆事件

$("p").clone(true).appendTo($("button"))

*******************************************************************************************************

---常用的遍历节点方法:

1、 取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.

2、 取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next()

3、 取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev()

4、 取得匹配元素前后所有的同辈元素: siblings()

//遍历checked 方法一

//遍历集合 该方法可以由元素调用

$("input:checked").each(function(){

alert($(this).val());

});

//遍历checked 方法二

//通用例遍方法，可用于例遍对象和数组

var $checks= $("input:checked");

$.each($checks,function(){

alert($(this).val());

});

//遍历checked 方法三

//此方法中函数可以增加两个参数 第一个参数表示索引，第二参数表示对当前遍历的对象的引用

var $checks= $("input:checked");

$.each($checks,function(index,data){

alert(index+"   "+$(data).val());

});

//遍历checked 方法四

//此方法中函数可以增加两个参数 第一个参数表示索引，第二参数表示对当前遍历的对象的引用

$("input:checked").each(function(index,data){

alert(index+"   "+$(data).val());

});

**************************************************************************************

---元素处理的一些方法：

--查找id="one"的div下所有的子元素

$("#one").children().each(function(){

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

});

--获取后面的同辈元素

alert($("#one").next().text())

--获取前面的同辈元素

alert($("#one").prev().text())

--用button替换p

$("p").replaceWith($("button"))或

$("button").replaceAll($("p"))

--创建元素节点<li></li>

var $li=$("<li></li>");

--添加ul节点元素的尾部

$("#city").append($li);或$li.appendTo($("#city"));

--添加ul节点元素的前端

$("#city").prepend($li);或 $li.prependTo($("#city"));

--方法after(cotent),before(content)把匹配的content元素插入到调用方法的元素后或前

$("#bj").after($li); $("#bj").before($li);

--方法insertAfter(content),insertBefore(content)把调用方法的元素插入到匹配的content后或前

$("#bj").insertAfter($("#cq")); $("#bj").insertBefore($("#cq"));

--删除元素节点，连元素属性也删除

$("#city").remove();此时alert($("#city").attr("id"));值为空，子元素和本元素都删除

--清空元素节点，元素子节点删除但自己的属性保存

$("#city").empty(); 此时alert($("#city").attr("id"));值为city，但子元素全删除

*******************************************************************************************************************

---代码动画特效：

*** slideToggle(speed,[callback])

* speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

* callback (Function) : (可选) 在动画完成时执行的函数

function ca(){

$("#mover").slideToggle("fast",ca);

}

ca();

*********************************************************************************************************************

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

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

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

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

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

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

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

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

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

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

说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,

并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素 p class=”myClass”

---层次选择器:DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等,

1 、ancestor descendant

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

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

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

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

3、prev + next

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

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

4、prev ~ siblings

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

说明: 匹配 prev 元素之后的所有 siblings 元素.

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

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

eg://改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色

$("#two~div").css("background","red")

//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色

$("#two").siblings("div").css("background","red")

---基础过滤选择器:

1、:first 用法: $(”tr:first”) ;   返回值 单个元素的组成的集合

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

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

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

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

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

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

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

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

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

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

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

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

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

8、:lt(index) 用法: $(”tr:lt(2)”)    返回值 集合元素

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

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

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

10、:animated   返回值 集合元素

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

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

1、:contains(text) 用法: $(”div:contains(’John’)”)   $("div:not(:contains('di'))") 返回值 集合元素

说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,

它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

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

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

3、:has(selector)

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

说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,

但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

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

说明: 匹配含有子元素或者文本的元素.

注意:这里是”:parent”,可不是”.parent”感觉与上面讲的”:empty”形成反义词.

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

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

说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.

意思是css中display:none和input type=”hidden”的都会被匹配到.

同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

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

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

---属性过滤选择器:通过元素的属性来获取相应的元素

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

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

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

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

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

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),

要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.

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

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

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

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

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

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

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

说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况实际使用的时候很常用.

这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

---子元素过滤选择器:

1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”)   返回值 集合元素

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

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

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

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

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

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

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

---表单对象属性过滤选择器:主要对所选择的表单元素进行过滤

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

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

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

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

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

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

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

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

---表单选择器:

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

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

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

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

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

说明: 匹配所有密码框.

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

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

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

说明: 匹配所有复选框

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

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

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

说明: 匹配所有图像域.

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

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

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

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

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

说明: 匹配所有文件域.

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

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,

除了匹配input中的hidden外,那些style为hidden的也会被匹配.

注意: 要选取input中为hidden值的方法就是上面例子的用法,

但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

jQuery学习总结之基础知识----持续更新中

语法总结和注意事项

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get (n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个< div>元素的内容。有如下两种方法：
$("div").eq(2).html();              //调用jquery对象的方法
$("div").get(2).innerHTML;       //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要有：html,text,height,width,val,click,blur,focus,select,submit等等，eg：
$("#msg").html();              //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");      //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();              //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");      //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的<b>new content</b>

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。eg：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})      //为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})      //实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})     //为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});

8、操作元素的样式
主要包括以下几种方式：
$("#msg").css("background");              //返回元素的背景颜色
$("#msg").css("background","#ccc")       //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");       //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");       //为元素增加名称为select的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")})       //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})  　　//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
}, function(){
       $(this).addClass("out");
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
       //每次点击时轮换添加和删除名为selected的class。
       $("p").toggle(function(){
              $(this).addClass("selected");   
       },function(){
              $(this).removeClass("selected");
       });
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
       $("p").trigger("click");              //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());});       //为每个p元素添加单击事件
$("p").unbind();       //删除所有p元素上的所有事件
$("p").unbind("click")       //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
       alert("Item #"+i+": "+tempArr);
}
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。可以有多个参数（合并多项并返回）如：
$.extend(settings, options);      //合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);　　//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });　　//tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });　　//tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。如：

$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。如：

$.trim("  hello, how are you?   ");        //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div   p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

相关文章