黑马程序员_学习日记19_jQuery

时间:2022-04-13 09:49:15

一、

$(document).ready(function(){

       alert(“加载完毕!”);

});//ready是注册事件的函数,和普通dom不同,不需要在元素上标记on**这样的事件

当页面Dom元素加载完毕时执行代码,可以简写为:

$(function(){

       alert(“加载完毕!”);

});

onload类似,但onload只能注册一次(没有C#中的+=机制),后注册的取代先注册的,而ready则可以多次注册都被执行。

JQueryreadyDomonload的区别:onload是所有的Dom元素创建完毕、图片、Css等都加载完毕后才被触发,而ready则是Dom元素创建完毕后就触发,这样可以提高网页的响应速度。在JQuery中也可以用$(window).load()来实现那种事件调用的时机。

 

二、Jquery中提供的函数

l        $.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组

例:得到一个元素值是原数组值二倍的新数组

var arr = [3,5,9];

var arr2 = $.map(arr,function(item){returnitem*2;});//联想C#委托的例子。函数式编程

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

l        $.each(array,fn)对数组array每个元素调用fn函数进行处理,没有返回值

var arr = {“tom”:”汤姆”,”jerry”:”杰瑞”,”lily”:”莉莉”};

$.each(arr,function(key,value){alert(key+”=”+value);});

l        还可以省略function的参数,这时候用this可以得到遍历的当前元素:

var arr = [3,6,9];

$.each(arr,function(){alert(this);});

 

三、jQuery对象、Dom对象

l        jQuery对象就是通过jQuery包装Dom对象后产生的对象:

alert($(‘#div1’).html())

$(‘#div1’).html()等价于:document.getElementById(“div1”).innerHTML;

$(‘#div1’)得到的就是jQuery对象,jQuery对象只能调用jQuery对象封装的方法,不能调用Dom对象的方法,Dom对象也不能调用jQuery对象的方法。

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

l        Arrayjs语言本身的对象,不是Dom对象,因此不需要转换为jQuery对象

l        jQuery修改样式:$(“#div1”).css(“background”,”red”);

获得样式:$(“#div1”).css(“background”);

修改value$(“#un”).val(“abc”);

获得value$(“#un”).val()

 

四、jQuery选择器

jQuery选择器用于查找满足条件的元素,比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象,相当于getElementById

$(“TagName”)来获取所有指定标签名的jQuery对象,相当于getElementByTagName

多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签元素

层次选择器:

1$(“div li”)获取div下的所有li元素

2$(“div > li”)获取div下的直接li子元素

3$(“.menuitem + div”)获取样式名为menuitem之后的第一个div元素(不常用)

 

五、节点遍历

       next()方法用于获取节点之后挨着的第一个同辈的元素,例:$(“.menuitem”).next(“div”)

       nextAll()方法用于获取节点之后的所有同辈元素,例:$(“.menuitem”).nextAll(“div”)

       siblings()方法用于获取所有同辈的元素,例:$(“.menuitem”).siblings(“li”)

 

六、基本过滤选择器

:first 选取第一个元素。$(“div:first”)选取第一个<div>

:last 选取最后一个元素。$(“div:last”)选取最后一个<div>

:not(选择器)选取不满足“选择器”条件的元素,例:

       $(“input:not(.myClass)”)选取样式名不是myClass<input>

:even:odd,选取索引是基数、偶数的元素,例:

       $(“input:even”)选取索引是奇数的<input>

:eq(索引序号):gt(索引序号):lt(索引序号)选取索引等于、大于、小于索引序号的元素,比如:$(“input:lt(1)”)选取索引小于1<input>

$(“:header”)选取所有的h1……h6元素

$(“div:animated”)选取正在执行动画的<div>元素

l        不仅可以使用选择器进行绝对定位,还可以进行相对定位,只要在$()中指定第二个从参数,第二个参数为相对的元素。$(“ul”,$(this)).css(“background”,”red”);

属性过滤选择器:

       $(“div[id]”)选取有id属性的<div>

       $(“div[title=test]”)选取title属性为“test”的<div>JQuery中没有对getElementByName进行封装,用$(“input[name=abc]”)

       $(“div[title!=test]”)选取title属性不为“test”的<div>

表单对象选择器:

       $(“#form1:enabled”)选取idform1的表单内所有启用的元素

       $(“#form1:disabled”)选取idform1的表单内所有禁用的元素

       $(“input:checked”)选取所有选中的元素(RadioCheckBox

       $(“select:selected”)选取所有选中的选项元素(下拉列表)

 

七、表单选择器

$(“:input”) 选取所有<input><textarea><select><button>元素

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

$(“:password”) 选取所有密码框。同理还有 :radio :checkbox:submit :image:reset :button:file :hidden

 

八、JQueryDom操作

1html()

2text()

3、使用attr()方法读取或设置元素属性:

       alert($(“a:first”).attr(“href”));

       $(“a.first”).attr(“href”,”http://www.rupeng.com”);

4、使用removeAttr删除属性

 

九、动态创建Dom节点

       使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到Dom中。例:

       varlink = $(“<a href = ‘http://www.baidu.com’>百度</a>”);

       $(“div:first”).append(link);

append 方法用来在元素的末尾追加元素

prepend 在元素的开始添加元素

after 在元素之后添加元素(添加兄弟)

before 在元素之前添加元素(添加兄弟)

l        删除节点:

(1)      remove()删除选择的节点

remove方法的返回值是被删除节点的对象,还可以继续使用被删除的节点。比如重新添加到其他节点下:

var lis = $(“#ulSiteli”).remove();

$(“#ulSite2”).append(lis);

(2)      empty()是将节点清空

l      节点操作

替换节点:$(“br”).replaceWith(“<hr/>”);

包裹节点:wrap()方法用来将所有元素逐个用指定标签包裹:

       $(“b”).wrap(“<fontcolor=’red’></font>”)//将所有粗体字红色显示

 

十、样式操作

       获取样式attr(“class”),设置样式attr(“class”,”myclass”),追加样式addClass(“myclass”),移除样式removeClass(“myclass”),切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass”myclass”),判断样式是否存在:hasClass(“myclass”)

 

十一、RadioButton操作

l        取得RadioButton的选中值

$(“input[name=gender]:checked”).val()

<input id=”Radio2” checked=”checked” name=”gender” type=”radio”value=””/>

<input id=”Radio1” checked=”checked” name=”gender” type=”radio”value=””/>

<input id=”Radio3” checked=”checked” name=”gender” type=”radio”value=”未知”/>未知

l        设置RadioButton的选中值

$(“input[name=gender]”).val([“”]);

或者

$(“:radio[name=gender]”).val([“”]);

l        RadioButton的选择技巧对于CheckBoxSelect列表框也适用

除了可以使用val批量设置RadioButtonCheckedBox等的选中状态以外,还可以设定checked属性来单独设置控件的选中状态

$(“#btn1”).attr(“checked”.true);

 

十二、事件

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

l        合成事件hoverhover(enterfn,leavefn),当鼠标放在元素上时调用enterfn方法,当鼠标离开元素时调用leavefn方法

l        如果想获得事件相关的信息,只要给响应的匿名函数增加一个参数:ee就是事件对象。

调用事件对象的stopPropagation()方法终止冒泡

l        阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新链接、提交按钮默认会提交表单,如果想阻止默认行为只要调用事件对象的preventDefault()方法。例:

$(“a”).click(function(e){alert(“所有超链接暂时全部禁止点击”);e.preventDefault();});

l        事件属性:pageXpageYtarget获得触发事件的元素(冒泡的起始,和this不一样)、which如果是鼠标事件获得按键(1左键、2中键、3右键)。altKeyshiftKeyctrlKey获得altshiftctrl是否按下,为bool值。keyCode(键盘码)、charCodeASCII码)

 

十三、动画

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

$(“:button[value=show]”).click(function(){$(“div”).show();});

$(“:button[value=hide]”).click(function(){$(“div”).hide();});

       如果showhide方法不带参数则是立即显示、立即隐藏,如果指定速度参数则会用指定时间进行动态显示、隐藏,单位为毫秒,也可以使用三个内置的速度:fastnormalslowjQuery动画函数中需要速度的地方一般也可以使用这三个值。

 

问题:

不能调试?右键→在浏览器中查看