jQuery笔记

第二章 jQuery基础选择器

#id选择器 $(“#my_id”)

element选择器 $(“div”)

.class选择器$(“.class”)

*选择器 $(“div *”)

选择任意多个指定元素，逗号隔开 $(“div, p”)

某一层次的一个或多个元素,空格隔开 $(“ancestor descendant”)

选择子集元素 $(“parent>child”)

相邻的下一个元素 $(“prev+next”)

全部相邻的元素 $(“prev~siblings”)

 

第三章 jQuery过滤性选择器

:first获取第一个元素 $(“li:first”)

:eq(index)获取任一个元素 $(“li:eq(3)”)

:contains(text)按照文本内容选择 $(“li:contains(‘123’)”)

:has()selector按包含的元素名称 $(“li:has(‘p’)”)

:hidden获取全部不可见的元素 $(p:hidden)

:visible

[attribute=value]获取与属性名和属性值完全相同的全部元素 $(“li[title=‘123’]”)

[attribute!=value]

[attribute*=value]获取属性之中包含指定内容的全部元素 $(“li[title*=’123’]”)

:first-child获取每个父元素中返回的首个子元素 $(“li:first-child”)

:last-child

 

第四章 jQuery表单选择器

:input返回全部的表单元素  $("#frmTest :input") 注意:前有空格

 :text全部单行的文本输入框元素 $(“#frmTest :text”)

 :password全部的数码输入文本框元素 $(“#frmTest :password”)

 :radio全部单选按钮元素 $(“#frmTest :radio”)

 :checkbox

:submit获取”type”属性值为”submit”的<input>元素 $("#frmTestinput:submit") 注意:前无空格

 :image获取”type”属性值为”image”的<input>元素 $("#frmTest :image")

 :button获取”type”属性值为”image”的<input>元素和<button>元素 $("#frmTest :button")

:checked获取处于选中状态的全部元素 $(“$frmTest :checked”)

:selected 获取<select>下拉列表框中处于选中状态的全部<option>元素$("#frmTest :selected")

 

第五章jQuery操作DOM元素

attr(属性名)返回元素的属性，attr(属性名，属性值)设置属性值 $(“#a1”).attr(“href”)

html()和text()返回元素内容，包含参数则设置元素内容，text()不包含HTML格式代码

addClass()参数为增加元素的样式名称，css()直接将样式的属性值写在空号中 $("#content").css({"background-color":"red","color":"white"})

removeAttr(name)和removeClass(class)移除元素的属性和样式 $("#content").removeClass("blue white")

append(content)向指定元素中追加元素，可以是字符、HTML元素标记或返回字符串的函数 $("body").append(rethtml())

appendTo()向指定的元素内插入内容 $(content).appendTo(selector)

    var$html = "<span class='red'>小青蛙</span>"

   $($html).appendTo("div");

before()和after()在元素前后插入内容 $(selector).before(content) $(".green").after($html)

clone()生成一个被选中元素的的副本$(selector).clone()

replaceWith()和replaceAll()替换元素或元素中的内容

wrap()包裹元素本身，wrapInner()包裹元素中的内容 $(".red").wrapInner("<i><i>")

each()遍历指定的元素集合 $(selector).each(function(index))

$("span").each(function (index) {

       if (index == 1) {

           $(this).attr("class", "red");

       }

});

remove()删除所选元素和子元素，通过添加过滤参数选定元素，empty只删除所选元素的子元素 $(“span”).remove(“.red”)

 

第六章 jQuery事件与应用

ready()类似于onLoad()，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发。 $(document).ready(function(){})等价于$(function(){})

bind()绑定元素的事件 $(selector).bind(event, [data] function)，多个时间名称用空格隔开

    $("#btntest").bind("clickmouseout", function () {$(this).attr("disabled","true"); });

hover()当鼠标移到元素上是执行第一个函数，移出时第二个函数 $(selector).hover(over, out);

toggle()可以在元素的click事件绑定两个或两个以上的函数，还可以实现元素的隐藏与显示的切换。$(selector).toggle(fun1(), fun2(), funN(), …); $("div").toggle();

unbind()移除已绑定的事件 $(selector).unbind(event, fun); $("div").unbind("clickdblclick");

one()方法绑定的事件只会触发一次 $(selector).one(event, [data], fun);

trigger()手动触发元素指定的事件 $(selector).trigger(event)

focus事件在元素获取焦点时触发，blur在元素失去焦点时触发

change事件在一个元素的值变化时触发

live()与bind()相同，还可以绑定动态元素

 

第七章 jQuery动画特效

show()和hide()方法显示和隐藏元素 $(selector).hide([speed[,callback]]);

toggle()实现动画切换

slideUp()和slideDown()滑动效果 $(selector).slideUp([speed[, callback]]);

slideToggle()

fadeIn()与fadeOut()实现淡入淡出

fadeTo()设置淡入淡出效果的不透明度

animate()简单的动画 $(selector).animate({params},speed,[callback])，在移动位置之前，必须将被移元素的’position’属性值设为’absolute’或’relative’

stop()方法停止所有动画 $(selector).stop([clearQueue],[goToEnd])clearQueue是否停止正在执行的动画，goToEnd是否完成正在执行的动画

delay()设置一个延时推迟动画 $(selector).delay(duration)

 

第八章 jQuery实现Ajax应用

load()异步请求数据load(url,[data],[callback])

getJson()异步加载JSON格式数据 $.getJSON(url,[data],[callback])

getScript()异步加载并执行js文件$.getScript(url,[callback])

get()以GET方式从服务器获取数据$.get(url,[callback])

post()

serialize()序列化表单元素值,生成标准URL编码文本字符串 $(selector).serialize()

ajax()加载服务器数据$.ajax([settings])

ajaxSetup()设置全局Ajax默认选项

ajaxStart()，ajaxStop()绑定Ajax事件，在Ajax请求发出前、后触发函数$(selector).ajaxStart(function())

 

第九章 jQuery常用插件

validate表单验证插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息。

$(form).validate({options})

ajaxForm表单插件，实现ajax方式向服务器提交表单数据，并通过options对象获取服务器返回数据。$(form).ajaxForm ({options})

lightbox图片灯箱插件，可以用圆角的方式展示选中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片。$(linkimage).lightBox({options})

jqzoom图片放大镜插件。$(linkimage).jqzoom({options})

cookie插件，保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

autocomplete搜索插件，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择$(textbox).autocomplete(urlData,[options]);

contextmenu右键菜单插件。$(selector).contextMenu(menuId,{options});

lifocuscolor自定义<li>选中时的背景色 $(Id).focusColor(color)

twoaddresult可以实现对两个数值进行相加和相减的运算，$.addNum(p1,p2) 和 $.subNum(p1,p2)

 

第10章 jQuery UI型插件

draggable拖拽插件，实现各种拖拽元素的效果$(selector).draggable({options})

droppable放置插件，将拖曳后的任意元素放置在指定区域中$(selector).droppable({options})

sortable拖拽排序 $(selector).sortable({options});

accordion面板折叠$(selector).accordion({options});

tabs选项卡$(selector).tabs({options});

dialog 对话框$(selector).dialog({options});

menu菜单工具，创建多级内联或弹出式菜单， $(selector).menu({options});

spinner微调按钮，$(selector).spinner({options});

tooltip工具提示，$(selector).tooltip({options});

 

第11章 jQuery工具类函数

$.browser获取浏览器的名称和版本信息

$.support.boxModel显示当前浏览器是否属于标准的w3c盒子模型

$.isEmptyObject(obj);检测一个对象的内容是否为空

$.isPlainObject检测对象是否为通过{}或new Object()关键字创建的原始对象

$.contains (container, contained);能检测在一个DOM节点中是否包含另外一个DOM节点

$.trim (str);

$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码$. param(obj);

$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者