您的位置：首页 > Web前端 > JQuery

jquery学习笔记

2016-12-06 23:31 218 查看
基础选择器：id选择器eg.$("#id")class选择器eg.$(“.class”)element选择器 eg.$("button")*选择器eg.$("*") $("form *")$(“sele1,sele2,seleN”)eg. $(".red,.green")获取任意多个元素，
$("ance
desc")
eg. $("div label")获取<div>元素中的全部<lable>元素(子、孙)空格$(“parent > child”) eg..$("div > label")获取<div>元素中的全部<lable>元素（子）>$(“prev + next”)获取与“prev”元素紧邻的下一个“next”元素eg. $("div + label") +$(“prev~ siblings”)获取与“prev”元素紧邻的全部siblings元素eg. $("p~label")过滤选择器：:first:last得到一组相同标签元素中的第一个(最后一个)元素eg.$(“li:first”)、$(“li:last”):eq(index)从一组标签元素数组中，灵活选择任意的一个标签元素eg.$("li:eq(2)"):contains(text) 按照文本内容来查找一个或多个元素eg. $(" li:contains('jQuery') "):has(selector)按照包含的元素名称来过滤eg.$("li:has('label')") 获取包含<label>元素的 全部<li>元素:hidden获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素eg.$("p:hidden") 获取隐藏的<p>元素:visible获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取eg.
$("p:visible")
获取那个可见的<p>元素

[attribute= value][attribute !=value]获取与属性名和属性值完全相(不)同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示 属性名称，value参数 表示属性值。eg.$("li[title !='蔬菜'] ")

[attribute *=value]获取属性值中包含指定内容的全部元素eg.$(" li[title *= '果' ] ")

:first-child:first-child 获取每个父元素中返回的首个(最后一个)子元素，它是一个集合eg . $("li:first-child")

表单选择器：<form id="frmTest" action="#"><input type="button" value="Input Button" /><br /><input type="text" id="Text1" value="我是小纸条"/><br /><select><option>Option</option></select><br /><textarea rows="3" cols="8"></textarea><br /><button>Button</button><br /></form>$("#frmTest:input").addClass("bg_blue");$("#frmTest:text").addClass("bg_blue");$("#frmTest :password").addClass("bg_red");$("#frmTest :radio").attr("disabled","true");$("#frmTest :checkbox").attr("disabled","true");$("#frmTest input:submit").addClass("bg_red");$("#frmTest :image").addClass("bg_red");$("#frmTest :button").addClass("bg_blue");$("#frmTest :checked").attr("disabled", true);$("#frmTest :selected").text();操作DOM元素：

操作元素的属性

attr
(属性名）
获取元素属性名的值；
attr(属性名，属性值)
设置元素属性名的值；
removeAttr(name)
移除元素的属性, 方法中参数表示要移除的属性名

操作元素的内容

html()
和 
text()
方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
html()
方法可以获取元素的HTML内容，因此，原文中的格式代码也被一起获取，而
text()
方法只是获取元素中的文本内容，并不包含HTML格式代码

操作元素的样式

addClass()
和
css()
方法可以方便地操作元素中的样式，前者括号中的参数为要增加的样式名称，后者直接将样式的属性内容写在括号中。
removeClass(class)
移除元素的样式,方法中参数表示要移除的样式名

向元素内追加内容

append() eg. $("body").append("<div id='test' title='hi'>我是调用函数创建的</div> ");在<body>元素中追加内容

appendTo()向被选元素内插入内容 eg.$(content).appendTo(selector)参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

在元素前后插入内容

before()在整个元素的前面插入指定的元素或内容
调用格式为： $(selector).before(content)
其中参数content表示插入的内容，该内容可以是元素或HTML字符串。
after() 在整个元素的后面插入指定的元素或内容调用格式为： $(selector).after(content)
其中参数content表示插入的内容，该内容可以是元素或HTML字符串。
元素复制 
clone() 
生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性。 它的调用格式为： $(selector).clone()其中参数selector可以是一个元素或HTML内容。
 
元素替换
 replaceWith() 
和
replaceAll()
方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：
$(selector).replaceWith(content)
和
$(content).replaceAll(selector) 参数selector为被替换的元素，content为替换的内容。
包裹元素和内容
 wrap()包裹元素本身调用格式为$(selector).wrap(wrapper)参数selector为被包裹的元素，wrapper参数为包裹元素的格式。
wrapInner() 包裹元素中的内容调用格式为$(selector).wrapInner(wrapper)参数selector为被包裹的元素，wrapper参数为包裹元素的格式。
遍历元素
each()
方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号；它的调用格式为：$(selector).each(function(index)) 参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始删除元素
remove()
删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素$("span").remove(".red");
empty() 
只删除所选元素的子元素$("span").empty();事件与应用：
页面加载时触发ready()事件 
ready()
事件类似于
onLoad()
事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，
ready()
可以写多个，按顺序执行。此外，下列写法是相等的：
$(document).ready(function(){} );
等价于
$(
function(){} );
使用bind()方法绑定元素的事件
 bind()
方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：
 $(selector).bind(event,[data]function) 参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。
 调用live()方法绑定元素的事件
与
bind()
方法相同，
live()
方法与可以绑定元素的可执行事件，除此相同功能之外，
live()
方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：
 $(selector).live(event,[data],fun)参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
使用unbind()方法移除元素绑定的事件
 unbind()
方法可以移除元素已绑定的事件，它的调用格式如下： 
$(selector).unbind(event,fun)
其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的
函数名称。
使用one()方法绑定元素的一次性事件

one()
方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：$(selector).one(event,[data],fun) 参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
 使用toggle()方法绑定多个函数

toggle()
方法可以在元素的click事件中绑定两个或两个以上的函数，每次click时依次执行多个函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...）
其中，fun1，fun2就是多个函数的名称
调用trigger()方法手动触发指定的事件
trigger()
方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：
$(selector).trigger(event) 其中event参数为需要手动触发的事件名称。
 使用hover()方法切换事件
hover()
方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：
$(selector).hover(over，out);over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。
文本框的focus和blur事件
focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。
 下拉列表框的change事件
当一个元素的值发生变化时，将会触发
change
事件，例如在选择下拉列表框中的选项时，就会触
change
事件。UI插件动画特效[b]：[/b]
调用show()和hide()方法显示和隐藏元素
 show()
和
hide()
方法用于显示或隐藏页面中的元素，它的调用格式分别为：
$(selector).hide(speed,[callback])
和 
$(selector).show(speed,[callback]
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
 调用toggle()方法实现动画切换效果
实现元素的显示与隐藏需要使用
hide()
与
show()
，那么有没有更简便的方法来实现同样的动画效果呢？调用
toggle()
方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：$(selector).toggle(speed,[callback])其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
使用slideUp()和slideDown()方法的滑动效果
可以使用
slideUp()
和
slideDown()
方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：
$(selector).slideUp(speed,[callback])
和 
$(selector).slideDown(speed,[callback])其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。
使用slideToggle()方法实现图片“变脸”效果
使用slideToggle()
方法可以切换
slideUp()
和
slideDown()
，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，
 格式为：$(selector).slideToggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
使用fadeIn()与fadeOut()方法实现淡入淡出效果
fadeIn()
和
fadeOut()
方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为： 
$(selector).fadeIn(speed,[callback])
和
$(selector).fadeOut(speed,[callback])
其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。
使用fadeTo()方法设置淡入淡出效果的不透明度
调用fadeTo()
方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：$(selector).fadeTo(speed,opacity,[callback])
其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。
调用animate()方法制作简单的动画效果
调用animate()
方法可以创建自定义动画效果，它的调用格式为：$(selector).animate({params},speed,[callback])
其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。
调用stop()方法停止当前所有动画效果
stop()
方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：$(selector).stop([clearQueue],[goToEnd])
其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。
调用delay()方法延时执行动画效果
delay()
方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：$(selector).delay(duration)其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。
实现Ajax应用：
jQuery.XXX等价于 
$.XXX
eg. 
jQuery.getJSON(url,[data],[callback])
或
$.getJSON(url,[data],[callback])
使用load()方法异步请求数据
使用
load()
方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：load(url,[data],[callback])参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
使用getJSON()方法异步加载JSON格式数据
使用
getJSON()
方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])
或
$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
使用getScript()方法异步加载并执行js文件
使用
getScript()
方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示： 
jQuery.getScript(url,[callback])
或 
$.getScript(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
使用get()方法以GET方式从服务器获取数据
使用
get()
方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：$.get(url,[callback])参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
使用post()方法以POST方式从服务器获取数据
与
get()
方法相比，
post()
方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：$.post(url,[data],[callback])参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。
使用serialize()方法序列化表单元素值
使用
serialize()
方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：$(selector).serialize()其中selector参数是一个或多个表单中的元素或表单元素本身。
使用ajax()方法加载服务器数据
使用
ajax()
方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：
jQuery.ajax([settings])
或 
$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象， 在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
使用ajaxSetup()方法设置全局Ajax默认选项
使用
ajaxSetup()
方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：
jQuery.ajaxSetup([options])
或
$.ajaxSetup([options])
可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。
使用ajaxStart()和ajaxStop()方法
ajaxStart()
和
ajaxStop()
方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：
$(selector).ajaxStart(function())
和
$(selector).ajaxStop(function())
其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行
ajaxStart()
方法绑定的函数，请求成功后，执行ajaxStop()方法绑定的函数。常用插件：表单验证插件——validate该插件自带包含必填、数字、URL在内的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：$(form).validate({options})其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
表单插件——form
通过表单form插件，调用
ajaxForm()
方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：$(form).ajaxForm ({options})其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
图片灯箱插件——lightBox
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下： $(linkimage).lightBox({options})其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
图片放大镜插件——jqzoom
在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的
jqzoom()
方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：
$(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
cookie插件——cookie
使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：保存：
$.cookie(key，value)
；读取：
$.cookie(key)
，删除：
$.cookie(key，null)
其中参数key为保存cookie对象的名称，value为名称对应的cookie值。
搜索插件——autocomplete
搜索插件的功能是通过插件的
autocomplete()
方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。
右键菜单插件——contextmenu
右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：
$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。
 自定义对象级插件
自定义类级别插件UI插件：
拖曳插件——draggable
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用
draggable()
方法，实现各种拖曳元素的效果，调用格式如下：
$(selector).draggable({options})options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。
放置插件——droppable
除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：$(selector).droppable({options})
selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。
拖曳排序插件——sortable
拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，
 它的调用格式为：$(selector).sortable({options}) selector参数为进行拖曳排序的元素，options为调用方法时的配置对象
面板折叠插件——accordion
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：$(selector).accordion({options})
其中，参数selector为整个面板元素，options参数为方法对应的配置对象。
选项卡插件——tabs
 使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：$(selector).tabs({options})
 selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()
方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。
对话框插件——dialog
 对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()
和
confirm()
函数的功能，它的调用格式为：$(selector).dialog({options})
selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
菜单工具插件——menu
 菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：$(selector).menu({options})
selector参数为菜单列表中最外层<ul>元素，options为
menu()
方法的配置对象。
工具提示插件——tooltip
工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：$(selector).tooltip({options});
 其中selector为需要显示提示信息的元素，可选项参数options为tooltip()
方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。
微调按钮插件——spinner
 微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，
 调用格式如下：$(selector).spinner({options})
selector参数为文本输入框元素，可选项options参数为spinner()
方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。
工具函数：
获取浏览器的名称与版本信息
$.browser
对象可以获取浏览器的名称和版本信息，如
$.browser.chrome
为true，表示当前为Chrome浏览器，
$.browser.mozilla
为true，表示当前为火狐浏览器
$.browser.version
方式获取浏览器版本信息。
检测浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过
$.support.boxModel
对象返回的值（true表示是W3C盒子模型），检测浏览器是否属于标准的w3c盒子模型。
 检测对象是否为空
在jQuery中，可以调用名为
$.isEmptyObject
的工具函数，检测一个对象的内容是否为空，如果为空，则该函数返回true，否则，返回false值，调用格式如下：$.isEmptyObject(obj) 其中，参数obj表示需要检测的对象名称。
 检测对象是否为原始对象
调用名为
$.isPlainObject
的工具函数，能检测对象是否为通过
{}
或
newObject()
关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为： 
$.isPlainObject (obj)
其中，参数obj表示需要检测的对象名称。
检测两个节点的包含关系
调用名为
$.contains
的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为： $.contains(container, contained);参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。
字符串操作函数
调用名为
$.trim
的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：
$.trim(str) 
参数str表示需要删除左右两边空格符的字符串。
URL操作函数
调用名为
$. param
的工具函数，能使对象或数组按照
key/value
格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：$. param(obj)参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。
 使用$.extend()扩展工具函数
调用名为
$.extend
的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：$.extend( {options} )
使用$.extend()扩展Object对象
除使用
$.extend
扩展工具函数外，还可以扩展原有的
Object
对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：$.extend(obj1,obj2,…objN) 参数obj1至objN表示需要合并的各个原有对象。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航