jquery学习笔记.docx

1、jquery学习笔记Jquery介绍jQuery对js封装成方法。可以比JS实现更多的特效，写更少的代码。先通过$()得到对象，再调用jQuery中定义的方法就可以轻松操作。API文档中有详细的用法，一看就会jquery对象是数组，直接操作时操作第一个元素jquery转成dom：$(#msg”)0.innerHTML; $(#msg”).eq(0)0.innerHTML;dom转成jquery：$(document.getElementById(”msg”)在哪里写代码1、在页面中导入jquery-1.4.1.js，地方1：$(function() /在这里写jquery代码1);地方2：$(

2、document).ready(function() /防止文档为加载完成就运行 /在这里写jquery代码2);事件函数$(document).ready(function)当文档完成加载时$(selector).click(function)点击事件$(selector).dblclick(function)双击事件$(selector).focus(function)获得焦点事件$(#gl).focus();var t=$(#gl).val();$(#gl).val().focus().val(t);获得焦点，让定界符在内容最后$(selector).mouseover(function

3、)鼠标悬停事件$(document). blur (function) ,失去焦点$(document). select (function)选上$(#test).find(option:selected).text();获取下拉框选中的文本$(document).hover(function ); 鼠标移上去$(document). submit(function)提交jquery方法$(this).hide(1000) 隐藏当前的 HTML 元素。变换时间1S$(p).show(); 显示元素，变换时间1S$.trim( love );/jquery去除字符串两端口的空格$(#select

4、).val(1); /恢复下拉框默认值$(#table的ID).find(tr).length获取表格的总行数,查找子元素$(“#page”).empty();清空$(p).css(background-color,red); 改变元素的css$(input).eq(0).removeAttr(value);移除input标签第一个索引的value属性$(selector).html(“content”) 改变htm内容$(#li+parentId+ div)0 获取下面的一个div元素$(a).appendTo($(#b);/吧a元素剪切到b元素里面$(a).attr(tagName) 获取

5、标签类型$(#priceUnit).focus(); 非输入框元素。是将页面定位到这个描点$(#id3a:first span).html(newname);/获取下面的第一个a元素$(#li+id).parent() /得到元素的父元素$(“jquery”).next();/下一个兄弟元素$(“#jquert”).prev();/上一个兄弟元素$(a span).toggle() ; /切换元素的可见状态，这个对象也可以是数组哦，全部都反过来$(#moreinfo).slideToggle();/平滑的从上往下显示出来$(#li+id+ a span).html(newname); /嵌套选

6、择的用法$(a).before(“”)，$(a).after：作为兄弟元素添加，之前之后$(p).unbind( click ) 解除事件$(#reqlist).prepend(); /添加到第一行$(#reqlist).append(); /添加到最后行$(p).remove() 删除元素$(a).text()/获得组件的值$(a).text(hehe);设置组建的值$(a).val();表单属性的值$(#bt_updSong).attr(disabled,true); /不可编辑$(input:radio,this).attr(checked,true);/单选钮选上if($(.radio

7、-span ).is(:checked) /是否选上var klopen=$(inputname=klopen:checked).val();单选按钮的值$(#postMsg) 通过id获取元素$(inputname=ht) 通过name获得元素，修改input标签就行了$(p)通过标签获得$(“.test”)通过class属性来获得$(tr:odd).css(background-color, #bbbbff);/表格的隔行背景$(#bt_searchArt).click();让某个按钮被点击$(p.intro) 选取所有 class=intro 的 元素。$(p#demo) 选取 id=d

8、emo 的第一个 元素。$(p).eq(1) 获取第二个p元素$(“:text”) 选取input的的type=text,其他的也一$(#msg).addClass(select);/为元素增加名称为select的class$(#msg).removeClass(select);/删除class$(#msg).hasClass(select);/判断是否有class$(#adTable tr:gt(0).remove();/从表的第二行开始删除$(p”).trigger(”click”);触发事件 回车和each遍历元素、数组、json回车事件：方式1.Input加上这个回车事件:onkeyp

9、ress=javascript:if(event.keyCode=13) login();方式2.$(#height).keypress(function(event)/按下回车enter键 if(13 = event.keyCode) $(#bt_searchAlbum).click(); );-/each遍历组件的值 callback可选 callback的参数也可自选（按顺序）i下标 n值$(li).each(function (i,n) alert(this.innerHTML); );/遍历数组$.each( 0,1,2, function(i, n) alert(i + : + n

10、 ); );/遍历json$.each( name: John, lang: JS , function(i, n) alert( i + : + n ); );扫第一个领红包,再扫第二个把刚刚领取的红包用出去。领到多少我微信发现金给你AJAX 请求(只有$.ajax可设置同步加载，其他都是异步的)请求描述$.getJSON (url,data,callback)使用 HTTP GET 来加载远程 JSON 数据$.get(url,data,callback)使用 HTTP GET 来加载远程数据$.post(url,data,callback)使用 HTTP POST 来加载远程数据$.aj

11、ax(options)把远程数据加载到 XMLHttpRequest 对象中(url) 被加载的数据的 URL（地址）(data) 发送到服务器的数据的键/值对象(callback) 当数据被加载时，所执行的函数(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)(options) 完整 AJAX 请求的所有键/值对选项Type可用值6种xml返回 XML 文档，可用 jQuery 处理。html返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。script返回纯文本 JavaScript 代码。不会自动缓存结果。json

12、返回 JSON 数据jsonpJSONP格式。使用JSONP形式调用函数时text返回纯文本字符串以下是用jquery对ajax 的例子/ $.ajax获取用户状态 $.ajax( type: get, async: false,/同步阻塞加载 cache: false,/不缓存 url: $ctx/actUser/userStatus.do?actUserId=+actUserId, contentType: application/json; charset=utf-8, dataType: json, success: function (data) if(data.goPage = 1

13、) window.location.href = index.jsp?reg=1; , error: function (err) );返回Json格式contentType: application/json; charset=utf-8,dataType: json,返回text格式 contentType:plain/text;utf-8, /备注返回的才是txt dataType:html/ getjson获取登录用户状态信息 $.getJSON(actUser/userStatus.do, actUserId:actUserId, function(data) if(data.goP

14、age = 1) window.location.href = index.jsp?reg=1; );文本框只能输入数字方法一：给输入框加入以下属性：方法2/不能输入字符串 function onlyNum(event) var isie = (document.all) ? true:false; var key; if(isie) key = window.event.keyCode; else key = event.which; if(key=190) return false; if (key = 48 & key = 96 & key = 105) | key = 8 | key

15、= 46 | key = 110 | key = 190) return true; return false; /选上这以后的单选钮$(table table).click(function ()$(input:radio,this).attr(checked,true); );清除file表单的值var file = $(#fileToUpload)file.after(file.clone().val();file.remove();获得窗口和元素的高度 var obj=$(#addemp)0; var ww=$(window).width(); var wh=$(window).hei

16、ght(); var dw=$(obj).width(); var dh=$(obj).height();/显示在屏幕中央，记得元素要加css:position: fixed; obj.style.top=(wh/2)-(dh/2)+px; obj.style.left=(ww/2)-(dw/2)+px;拓展 自己写方法$.fn.background = function(bg)return this.css(background, bg);网上的选择方法大全jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $(#myELement) 选择id值等于myElement

17、的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(div) 选择所有的div标签元素，返回div元素数组 $(.myClass) 选择使用myClass类的css的所有元素 $(*) 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$(#myELement,div,.myclass) 层叠选择器： $(form input) 选择所有的form元素中的input元素 $(#main *) 选择id值为main的所有的子元素 $(label + input) 选择所有的label元素的下一个input元素节点，经测试选择器返回的是lab

18、el标签后面直接跟一个input标签的所有input标签元素 $(#prev div) 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器： $(tr:first) 选择所有tr元素的第一个 $(tr:last) 选择所有tr元素的最后一个 $(input:not(:checked) + span) 过滤掉：checked的选择器的所有的input元素 $(tr:even) 选择所有的tr元素的第0，2，4. .个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） $(tr:odd) 选择所有的tr元素的第1，3，5. .个元素

19、 $(td:eq(2) 选择所有的td元素中序号为2的那个td元素 $(td:gt(4) 选择td元素中序号大于4的所有td元素 $(td:ll(4) 选择td元素中序号小于4的所有的td元素 $(:header) $(div:animated) 内容过滤选择器： $(div:contains(John) 选择所有div中含有John文本的元素 $(td:empty) 选择所有的为空（也不包括文本节点）的td元素的数组 $(div:has(p) 选择所有含有p标签的div元素 $(td:parent) 选择所有的以td为父节点的元素数组 可视化过滤选择器： $(div:hidden) 选择所有

20、的被hidden的div元素 $(div:visible) 选择所有的可视化的div元素 属性过滤选择器： $(divid) 选择所有含有id属性的div元素 $(inputname=newsletter) 选择所有的name属性等于newsletter的input元素 $(inputname!=newsletter) 选择所有的name属性不等于newsletter的input元素 $(inputname=news) 选择所有的name属性以news开头的input元素 $(inputname$=news) 选择所有的name属性以news结尾的input元素 $(inputname*=ma

21、n) 选择所有的name属性包含news的input元素 $(inputidname$=man) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 子元素过滤选择器： $(ul li:nth-child(2),$(ul li:nth-child(odd),$(ul li:nth-child(3n + 1) $(div span:first-child) 返回所有的div元素的第一个子节点的数组 $(div span:last-child) 返回所有的div元素的最后一个节点的数组 $(div button:only-child) 返回所有的div中只

22、有唯一一个子节点的所有子节点的数组 表单元素选择器： $(:input) 选择所有的表单输入元素，包括input, textarea, select 和 button $(:text) 选择所有的text input元素 $(:password) 选择所有的password input元素 $(:radio) 选择所有的radio input元素 $(:checkbox) 选择所有的checkbox input元素 $(:submit) 选择所有的submit input元素 $(:image) 选择所有的image input元素 $(:reset) 选择所有的reset input元素 $(:button) 选择所有的button input元素 $(:file) 选择所有的file input元素 $(:hidden) 选择所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器： $(:enabled) 选择所有的可操作的表单元素 $(:disabled) 选择所有的不可操作的表单元素 $(:checked) 选择所有的被checked的表单元素 $(select option:selected) 选择所有的select 的子元素中被selected的元素