JQuery学习笔记
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 543
JQery是对javascript的封转库也就是调用JQuery的一句函数JQuery的扩展插件非常多JQuery的优点:尺寸小、使用简便、链式编程、隐式迭代(自动对于多个元素进行迭代方法调用)、屏

JQery是对javascript的封转库
也就是调用JQuery的一句函数
JQuery的扩展插件非常多

JQuery的优点:尺寸小、使用简便、链式编程、隐式迭代(自动对于多个元素进行迭代方法调用)、屏蔽游览器差异跨浏览器兼容性好、插件丰富、开源、免费


vsdoc是vs2008sp1以后增加的一个技术,将js技术未见对应的vsdoc(相当于一个js库提供的数据库)放到js
一起,就会有这个第三方js的自动提示的功能

onload只能注册一次,后注册的取代前注册的,而
ready则可以多次注册都会被执行

$(document).ready(function (){alert("你好!")})
ready简写方式

$(function(){alert("你好")});

ready则是dom元素创建完毕被触发,这样可以提高网页的响应速度
早jquery中可以使用$(window).load那种事件调用的时机

$其实是一个函数


jquery提供的函数:
$.map(array,fn)对数组array中每一个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组
例如:
 var array = [3, 5, 8];
        var array2 = $.map(array, function (item) {
            return item * 2;
        })
$.

$.map不能处理Dictionary风格的数组

$.each(array,fn)对数组array每个元素进行遍历,相当于dom中屈指的for循环
$.each(arr, function () {
            alert(this);//表示当前遍历到的value,dictionary也一样
        })

普通数组用以上表达式


****jquery对象、dom对象

jquery对象就是通过jquery包装dom对象后产生的对象


 alert($(div1).html());//取到div1中innerHTML的值
jquery对象只能调用jquery对象封装的方法,不能调用dom对象的方法,dom对象也不能调用jquery对象的方法,所以alert($(div1).innerHTML)是错的,因为innerHtml是dom对象的属性

array是js语言本身的对象,不是dom对象,因此不需要转换为jquery对象才能用

将dom转换为dom对象,$(dom对象);当调用jquery没有封装的方法的时候必须用dom对象,转换方法:
var domobj=jqobj[0] 或者var domobj=iqobj.get(0)


jquery修改样式:$("#div1").css("background","red");
获得样式$("#div1").css("background");


$("#div1").val(new date())赋值//有参数就是赋值
$("#div1").val()取值

$("#div1").html("")赋值//相当于dom中的innerHTML
$("#div1").html()取值

$("#div1").text("")赋值//相当于dom中的innerText
$("#div1").text()取值

****jquery选择器
jquery选择器用于查找满足条件的元素,比如可以用
$("#控件id")来根据控件id获得控件的jquery对象

可以根据控件的类名称,比如$("div").click()

css选择器
<style type="text/css">
.test{background-color:red;}
</style>

 $(".test").css("background", "blue");

多条件选择器:$("p,div,span.test"),同时选择p标签、div标签和拥有test样式的span标签的元素
注意选择器表达式中的空格不能多不能少

层次选择器
$("div li")获取div下的所有li元素(后代、子代、子的子)
$("div > li")获取div下的直接li子元素

$(".test + div")获取样式名为test之后的第一个div元素(不常用)

$(".test ~ div")获取样式名为test之后的所有div元素(不常用)

***jquery的迭代
就算写错id名称也不会报错
可以用以下方式判断:
if($("div1".length<=0))
{
   alert("该控件没有找到!");
}

****节点遍历;
next()方法用于获取节点之后的挨着的第一个同辈元素
nextAll()方法用于获取节点之后的方法用于获取所有元素nextAll("div")可以过滤
siblings方法用于获取所有同辈元素


*****链式编程
jquery是javascript的一个库,所以基本都为方法,所以可以一直点下去,

******基本过滤选择器

:first选取第一个元素。$("div:first")选取第一个div

:last选取第一个元素。$("div:last")选取最后一个div

:not(选择器)选取不满足“选择器”条件的元素i
$("input:not(.test)")选取样式名不是test的<input>

:even、:odd 选取索引是奇数、偶然的元素:
$("input:even")选取索引是奇数的<input>
(多用于隔行变色)

:eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引序号等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的input

***相对选择
只要在$()指定第二个参数,第二个参数为相对的元素。
  $("ul", $(this).css("background", "red"));

*****更多的过滤器


$("div[id]")选取有id属性的<div>
$("dic[title=test]")选取title属性为"test"的<div>(进行属性的过滤) 比如:$("input[name=abc]") 找到input控件中name属性为abc的控件
$("dic[title!=test]")选取title属性不为"test"的<div>

还可以选择开头、结束、包含等、条件还可以复合


****表单选择器(过滤器)
$("#form1:enabled")选取id为form1的表单内所有启用的元素

$("#form1:disabled)选取id为form1的表单内所有禁用的元素

$("#form1:checked)选取id为form1的表单内所有选中的元素(Radio、checkBox)

$(":input")选取所有的<input>
<textarea>、<select>、<button>


$(":text")选取所有单行文本框

$(":password")选取所有密码框


$("#form1:selected")选取所有元素中的选项元素(下拉列表)

注意空格的问题


****元素的each
jQuery元素的也可以调用each方法,只是对$.each的简化调用
$("input[name=name]:checked").each()

****jquery的Dom操作
使用html、text方法,相当于Dom、对象中的innerHTML和innerText

使用attr()方法读取或者设置元素的属性,对于Jquery没有封装的属性用attr来操作

使用removeAttr删除属性。

*****动态创建Dom节点

使用$(html字符串)来创建Dom节点
然后调用append等方法将新创建的节点添加到Dom中;
append方法用来在元素的末尾追加元素
prepend方法用来在元素的前面添加元素
after在元素之后添加元素(添加兄弟)
before在元素之前添加元素(添加兄弟)


var link = $("<a href='http://www.baidu.com' >百度</a>");
$("div:first").append(link);

$()创建的就是一个Jquery对象,可以完全进行操作

能不要用动态生成就不要动态生成


*****删除节点
remove方法,删除选择的节点
$("ul li.testitem").remove();
删除有testItem样式的li

删除的元素还有,只是暂时移除,后面还可以
remove方法的返回值是被删除的节点对象
var lis=$("ul li.testitem").remove();
$("#ulsite2").append(lis);


empty()方法是将元素清空,不在可用,相当于销毁

val方法来获得jquery对象的值


parseInt(val,10)

再次重申,jquery只是一个javascript的一个库


不要问“在jquery中如何实现javascript中实现”
先查看一下有没有封装
不能实现的就用原来的javascript实现


appendTo方法将节点添加到控件Id对象中,比如;
$(this).css("background", "white").appendTo("#ul2");

replaceWith()方法将标签元素替换成新的元素标签
比如,将br替换成了hr
 $("br").replaceWith("<hr />");


wrap()方法,用来将所有元素逐个用指定标签包裹
比如:
$("b").wrap("<font color='red'></font>");将所有粗体字红色显示


获取样式attr("class","myclass"),
追加样式addClass("myclass"),
移除样式removeClass("myclass"),
(都不影响其他样式)
切换样式toggleClass("myclass"){如果存在样式就替换,没有就追加}

判断是否存在样式:hasClass("myclass")


 $("body *")新的选择器,选择页面中所有的控件对象

IEColoecting工具,可以让IE各种版本共存

****RadioButton操作
取得RadioButton的选中值
$("input[name=name]:checked").val()

radioButton设值
 $(":radio[name=name]").val(["保密"]);


*****Jquery中的事件绑定:$("#btn").bind("click",function(){}),每次都这么调用太麻烦
所以jquery可以使用$("#btn").click(function(){})来进行简化

hover(enterfn,leavefn),当鼠标放在元素上时进行调用,离开时调用下一个函数


Jquery中的冒泡事件跟dom中是一样的,并且封装了禁止冒泡:$("tr").click(function(e){alert("tr");e.stopPropagation();})


如果想获得事件的信息,只要给匿名参数增加一个参数:e,e就是参数的对象e.stopPropagation();


e.praeventDefault()取消默认的行为,比如链接、表单、提交按钮之类的行为

****e的其他事件
pageX
pageY点击事件时的坐标
、target获得触发事件的元素(冒泡的起始,和this不一样)、which如果是鼠标事件获得的按键(1左键、2中键、3右键)
keycode(键盘码 小键盘的1和主键盘的1keyCode不一样)
charCode(asc码)
移除事件的绑定:bind()方法可以移除一切绑定的事件
unbind("click")则只移除click的绑定
one("click",function(){})
只触发一次


******动画
show()、hide()方法会显示和隐藏元素。用toggle()方法在显示、隐藏之间切换

可以给上面的方法带参数,单位为毫秒,也可以使用内置的速度:fast(200毫秒)、slow(600)、normal(400)\一般可以用这三个值


****动态添加难题
不能把定义的变量当成控件id来用
必须先把元素名加载到页面上才能控制它

*****Jquery插件:Jquery cookie
cookie就是保存在游览器上的内容,用户在这次游览页面的时候想cookie中保存文本内容,下次访问页面的时候就可以取出来上次保存的内容,这样就起到了记忆的作用!
cookie有几个属性,名字、值、域、限期
cookie是跟域名相关的
cookie不是写入以后一定下次能读出来,游览器可能会定期清除、用户也可能会手动清除


expires表示要求游览器保留cookie的期限
不设代表浏览器关闭之后就会被销毁

*****Jquery_UI插件的使用

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2