• 首页
• 贵金属
• 列表
• 正文

jQuery学习笔记基础知识扫盲入门篇呱呱老师

2013-06-16 18:42:00

241 491

提供了强大的功能函数解决浏览器兼容性问题实现丰富的UI纠正错误的脚本知识

2.常用的知识点

jquery的id选择器：$("#btnShow")事件绑定函数bind()显示和隐藏函数show()hide()修改元素内部html的函数html()

仅仅凭借多浏览器支持这一特性，就足以让我们学习并使用jquery，因为如今想编写跨浏览器的脚本真的是一件困难的事情！

--系列化学习方法，加手动敲代码，加上自己的观念在里面加以变化--

而不是简单的复制，粘贴运行看效果，那样是学不好知识的。多多练习才是王道!!

3.jquery新特性1.完美的js智能提示支持2.功能强大的选择器3.性能最佳的选择器4.支持多种浏览器5.优雅的链式语法$(".myClass").css("color","red").show();6.ajax操作$("#divRequest").load("../data/ajaxGetCityInfo.aspx",{"resultType":"html"})7.Datepicker日历控件8.dialog对话框控件9.tab控件10.accordion手风琴菜单控件11.progressbar进度条控件12.slider滑动条控件13.button按钮控件14.autocomplete自动提示控件15.易于扩展（基于jquery开发的日历框）16.jquerymobile开发基于移动互联网平台的炫丽应用

4.dom对象，jquery包装集对比vardiv=document.getElementById("testDiv");vardivs=document.getElementByTagName("div");

包装集${"#testDiv"}上面语句构造的包装集只含有一个id是testDiv的元素。

1.dom转jquery包装集vardiv=document.getElementById("testDiv");vardomToJQueryObject=${div};

2.jquery包装集转domvardomObject=$("#testDiv")[0];//注意：通过索引器返回的不再是jquery包装集，而是一个dom对象。

----------130615----------

7.目标，动态创建元素，管理jquery包装集，添加，删除，切片。

htmldom创建元素,几乎所有的浏览器都兼容。

//使用dom标准创建元素varselect=document.createElement("select");select.options[0]=newOption("加载项1","value1");select.options[1]=newOption("加载项2","value2");select.size="2";varobject=testDiv.appendChild(select);

以下是jquery创建对象的方法jquery(html,ownerDocument)returns:jquery

$("动态创建的jquery对象div

");

//jquery使用动态创建的$(document).ready(function)方法$(document).ready(function(){testDiv.innerHTML="动态创建的div

";});

//简便语法$(function(){testDiv.innerHTML="动态创建的div

";});

1.过滤Filtering$("p").eq(1)//获取匹配的第二个元素$("p").filter(".selected")//保留带有select类的元素$("div").filter(function(index){return$("ol",this).size()==0;});//保留子元素中不含有ol的元素$("input[type='checkbox']").parent().is("form")//由于input元素的父元素是一个表单元素，所以返回true$("p").append($("input").map(function(){return$(this).val();}).get().join(","))//把form中的每个input元素的值建立一个列表。

$("p").not($("#selected")[0])//从p元素中删除带有select的ID的元素$("p").slice(0,1)//选择第一个p元素

add(expr);添加至匹配的元素children([expr]);查找每个子元素。closest([expr]);取得表达式匹配的最新的父元素contents();查找匹配元素内部所有的子节点（包括文本节点）。find(expr);$("pspan")与$("p").find("span")相同。next(expr);后面相邻的同辈元素nextAll(expr);同上offsetParent();返回第一个有定位的父类parent(expr);父节点parents(expr);祖先元素prev(expr);前面相邻的同辈元素prevAll(expr);同上siblings(expr);同辈元素

串联ChainingandSelf()end()

----------------------class4----------------------8.获取和操作元素的属性和css样式

dom属性和元素属性是有区别的。实际浏览器最后会将标签元素解析成dom对象，并且将元素的元素属性存储为dom属性，两者是有区别的。举例：如果要设置元素的css样式类，使用的是dom属性className而不是元素的classimg1.className="classB";

javascript操作元素属性：getAttribute和setAttribute。对应jqueryattr(name);取得第一个匹配元素的属性值。如果没有相应的属性，则返回undefined。attr(properties);以名称/值对形式设置为所有匹配元素的属性。className属性而不是class，或者可以直接使用.addClass(class)和.removeClass(class)例如：$("img").attr({src:"test.jpg",alt:"TestImage"});attr(key,value);为所有匹配的元素设置一个属性值。attr(key,fn);fn表示提供一个函数，由这个函数计算的值作为属性值。removeAttr(name);从每一个匹配的元素中删除一个属性。

##修改css类##addClass(class)hasClass(class)removeClass(class);参数可选，如果不传入参数则移除全部的css类。toggleClass(class);如果存在就删除一个类，不存在就添加一个类。toggleClass(class,switch);当switch是true时添加类，否则为false时删除类。

--注意：addClass和removeClass一次可以传入多个css类，用空格分割。--

##修改css样式##即修改元素属性stylecss(name);访问第一个匹配元素的样式属性。css(properties);css(name,value);数字将自动转化为像素值。

----------------------class5----------------------document.getElementById("testDiv2").onclick=msg22;等效于单击事件2

以前的事件绑定模式if(oTarget.addEventListener){//fordom

}elseif(oTarget.attachEvent){//forie

}

9.事件处理函数bind(type,[data],fn);one(type,[data],fn);一次性的事件处理函数.trigger(event,[data]);triggerHandler(event,[data]);unbind(type,fn);

2.使用脚本传值$("#testDiv4").bind("click",{customer2:"优一队列"},function(event){alert(event.data.customer2);});

trigger(event,[data])和triggerHandler(event,[data]);

##EventHelper##click()和click(fn)分别用来触发单击事件和设置单击事件.例如:设置单击事件:$("#testDiv").click(function(event){alert("testdivclick!");});等效于:$("#testDiv").bind("click",function(event){alert("testdivclick!");});触发单击事件:$("#testDiv").click();等效于:$("#testDiv").trigger("click");

其他EventHelperblur()blur(fn)change()change(fn)click()click(fn)dblclick()dblclick(fn)error()error(fn)focus()focus(fn)keydown()keydown(fn)keypress()keypress(fn)keyup()keyup(fn)load()load(fn)mousedown(fn)mouseenter(fn)mouseleave(fn)mousemove(fn)mouseout(fn)mouseover(fn)mouseup(fn)resize(fn)scroll(fn)select()select(fn)submit()submit(fn)unload(fn)

event.data,event.target,event.type

重要:hover(over,out);应用于菜单.toggle(fn,fn2,fn3,fn4,...);//对象不支持此属性或方法.jquery-1.9.1.min.js注意:不是triggle

css样式:style="cursor:pointer"

事件对象的函数event.preventDefault();event.isDefaultPrevented();event.stopPropagation();event.isPropagationStopped();event.stopImmediatePropagation();event.isImmediatePropagation();

----------130616----------

11.jQueryAJax$(function(){$("#btnAjaxJquery").click(function(event){$("#divResult").load("data/AjaxGetCityInfo.aspx",{"resultType":"html"})//使用jquery的load方法只需要一句话。完成ajax请求。});})

load(url,[data],[callback]);默认使用Get方式，如果传递了data参数则使用Post方式。

回调函数function(responseText,textStatus,XMLHttpRequest){}

jquery.get(url,[data],[callback],[type])//type参数是指data数据的类型,xml,html,script,json,jsonp,text默认为html

回调函数的签名function(data,textStatus){//datacouldbexmlDoc,jsonObj,html,text,etc...this;//theoptionsforthisajaxrequest}

jquery.getJSON(url,[data],[callback])方法相当于jquery.get(url,[data],[callback],"json");

jquery.getScript(url,[callback]);实质上工作原理:varhead=docuemt.getElementByTagName("head")[0];varscript=document.createElement("script");script.src=s.url;head.appendChild(script);

jquery.post(url,[data],[callback],[type]);具体用法和get相同,只是提交方式由get改成post

jquery.ajax(options);

ajax默认的全局的option选项$.ajaxSetup({url:"../url",data:{"param":"ziqiu.zhang"},global:false,---默认为true,表示触发全局的ajax事件.type:"POST",success:function(data,textStatus){$("#divResult").html(data);}});

//不传递参数调用$("#btnAjax").click(function(event){$.ajax();});$("#btnGet").click(function(event){$.get();});$("#btnPost").click(function(event){$.post();});$("#btnGet2").click(function(event){$.get("../url",{"param":"other"});});

serialize()函数.说明:serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串,便于我们使用ajax发送时获取表单数据,这和一个form按照get方式提交时,自动将表单对象的名/值放到url上提交差不多.

全局的ajax事件.ajaxStart(callback);ajaxSend(callback);ajaxSuccess(callback);ajaxComplete(callback);ajaxStop(callback);ajaxError(callback);

回调函数的签名function(evt,request,settings){}我们可以通过将默认options的global属性设置为false来取消全局ajax事件的触发.

注意事项:如果在get请求发送的url中有两个同名参数，比如两个param参数，此时服务器端获取到得param是一个用逗号分隔多个值的字符串。

----------------------class7----------------------

12.jQuery动画特效基本动画函数basicsshow();show(speed,[callback]);hide();hide(speed,[callback]);toggle();//切换元素的可见状态，如果是可见切换为隐藏，如果是隐藏切换为可见。toggle(switch);true为可见，false为隐藏。toggle(speed,[callback]);

滑动动画效果slidingslideDown(speed,[callback]);//就是show的滑动效果版本slideUp(speed,[callback]);//就是hide的滑动效果版本slideToggle(speed,[callback]);//slideToggle就是slideToggle滑动效果版本

淡入淡出函数fadingfadeIn(speed,[callback]);fadeOut(speed,[callback]);fadeTo(speed,opacity,[callback]);透明度渐变没有切换函数。

##自定义动画##高级应用。

全局控制属性jquery.fx.off=true;//关闭所有动画，当把这个属性设成false之后，可以重新开启所有动画。

----------------------class8----------------------13.基本完整页面代码结构//必须放在头部加载的语句块，尽量避免使用。...

//用户自定义方法userDefindMethod

//事件绑定$(function(){$("#btnShow").bind("click",userDefindMethod);...});

//加载时执行的语句$(function(){$("#btnShow").attr("value","被修改后的显示按钮")});

--说明--1.在页面底部添加