黑马程序员--JQuery学习笔记
2014-02-07 15:11
357 查看
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a
href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------
1.JQuery简介
普通的JavaScript的缺点：每种空间的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Doio、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了研发。和谐库对JavaScript的封装，也就是我们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript预压写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件仍然需要JavaScript的技术，JQuery本身就是一堆JavaScript函数。
JQuery是最火的JavaScript库，已经被集成到VS2010中了，得到了MS的支持，MS的Ajax、toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。
JQuery可以和JavaScript混合使用.就像在MFC中依然可以调用WIN32函数
2.JQuery之ready
$(document).ready(function(){alert("加载完毕");})//注册事件函数，和普通dom不一样，不需要在元素上标记on**这样的事件。
DOM中的事件onload只能注册一次，后注册的取代先注册的。而ready则可以多次注册都会被执行。
onload是所有dom元素创建完成，，图片、css等都加载完毕后才被触发，而ready则是dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在JQuery中也可以用$(window).load()来实现onload那种事件调用的时机。
当页面Dom元素加载完毕时执行代码，可以简写为：
$(function(){alert("加载完毕！");});
3.JQuery提供的一些函数
<1>$.map(array,fn)对数组array中的每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新的array。
var arr=[3,5,9];
var arr2=$.map(arr,function(item){return item*2})；
$.map不能处理Dictionary风格的数组。
<2>$.each(array,fn)对数组array每个元素调用fn函数进行处理，没有返回值。
var arr={"tom":"汤姆","jim":"吉姆","jerry":"杰瑞"};
$each(arr.function(key,vlaue){alert(key+"="+value);});
如果是普通风格的数组，则key的值是序号。
$each(arr.function(key){alert(key)});
单个元素取得key。
$each(arr.function(){alert(this)});
没有参数使用this取得value。
4.JQuery对象和Dom对象
JQuery对象就是通过JQuery包装Dom对象后产生的对象。
<1>alert($('#div1').html())。Dom对象要通过JQuery进行操作，先要转换为JQuery对象进行操作。
$('#div1').html()等价于:document.getElementById("div1").innerHTML。
$('#div1')得到的就是JQuery对象，JQuery对象只能调用JQuery对象封装的方法，不能调用Dom对象方法和属性。
Array是JS语言本身的对象，不是Dom独享，因此不需要转换为JQuery对象才能用。
<2>将JQuery对象转换为Dom对象的方法，$(dom对象);当调用JQuery没有封装方法的时候必须用Dom对象，转换方法 var domobj=jqobj[0]或者var domobj=jqobj.get(0)
var div1_2=$(div1)[0];alert(div1_2.innerHTML);
<3>JQuery修改样式：$('#div1').css("background","red");
获得样式$("#div1").css("background");
修改value:$("#un").val("abc")
获得value:$("#un").val().类型的获得、设置innerText、innerHTML用text()和html()。
5.JQuery选择器
<1>JQuery选择器用户查找满足条件的元素，比如可以用$("#控件id")来格局空间id获得空间的JQuery对象，相当于getElementById:$("#div1").html("<font color=red>hello</font>")
<2>$("TagName")来获取指定标签的JQuery对象，相当于getElementsByTagName:
$(function(){$("p").click(function(){laert("we are p")});})在加载完成以后再调用，否则没有对象。隐式迭代，给所有选择出来的元素增加click事件。
<3>CSS选择器，同事选择拥有样式的多个元素。
<style type="text/css">
.test{background-color:red}
</style>
<script type="text/javascript">
$(function(){$(".test").click(function(){alert($(this).text());})};
</script>
<p class="test">test1</p>
<p class="test">test2</p>
<p class="test">test3</p>
<4>多条件选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素。
注意选择器表达式中的空格不能多不能少。
<5>层次选择器:
(1)$("div li")获取div下的所有li元素(后代，子、子的子...)
(2)$("div>li")获取div下的li子元素。
(3)$(".menuitem+div")获取样式名为menuitem之后第一个div元素（不常用）。
(4)$(".menuitem~div")获取样式名为menuitem之后所有的div元素（不常用）。
6.节点遍历
next()方法用户获取节点之后的第一个同辈元素,$(".menuitem").next("div")
nextAll("div")方法用于获取方法
后面括号是一个筛选器.
siblings()方法用户获取所有同辈元素,$("menuitem").siblings("li")
替换节点
$("br").replaceWith("<hr/>");
将<br/>替换为<hr/>将回车换行替换为横线
包裹节点
wrap()方法用来将所有元素逐个用指定标签包裹
$("b").wrap("<font color='red'></font>")将所有粗体字红色显示
7.基本过滤选择器
相对定位:$("div:first",$(this))指定上下文context就会从指定位置开始.
<1>:first选取第一个元素$("div:first")选取第一个<div>
<2>:last选取最后一个元素$("div:last")选取最后一个<div>
<3>:not(选择器)选择不满足"选择器"条件的元素$("input:not(.myClass)")选取样式名不是myClass的<input>
<4>:even/:odd,选取索引是奇数,偶数的元素:$("input:even")
<5>:eq(索引序号)/:gt(索引序号)/:lt(索引序号)选取索引等于/大于/小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
<6>$(":header")选取所有的h1....h6元素.(*)
<7>$("div:animated")选取正在执行动画的<div>元素.(*)
<8>属性过滤选择器
$("div[id]")选取有id属性的<div>
$("div[title=test]")选取title属性为"test"的<div>
$("div[title!=test]")选取title属性不为test的<div>
$("input[name=abc]") getElementsByName进行封装
还可以选择开头/结束/包含等,条件还可以符合.
<9>表单对象选择器:
$("#form1:enabled")选取id为form1的表单内所有的启用的元素
$("#form1:disabled")选取id为form1的表单内所有禁用的元素
$("input:checked")选取所有选中的元素(Radio/checkBox)
$("select:selected")选取所有选中的选项元素(下拉列表)
<10>表单选择器
$(":input")选取所有<input>/<textarea>/<select>和<button>元素.和$("input")不一样,$("input")只获得<input>.
$(":text")选取所欲单行文本框,等价于$("input:[type=text]")
$(":password")选取所有密码框.
同理还有:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden
8.JQuery元素的each
JQuery元素也可以调用each方法,只是对$.each的简化调用.
<script type="text/javascript">
4000
$(function () { $("input[name=ck]").click(function () {
var arr=new Array();
$("input[name=ck]:checked").each(function (key, value) { arr[key] = $(value).val() });
if (arr.length <= 0) {
$("#showp").text("No checkedbox had been checked!");
return;
}
$("#showp").text(arr.join(',')+"has been checked!");
})
});
</script>
</head>
<body>
<input type="checkbox" name="ck" value="beijing" />beijing<br />
<input type="checkbox" name="ck" value="nanjing" />nanjing<br />
<input type="checkbox" name="ck" value="shanghai" />shanghai<br />
<input type="checkbox" name="ck" value="tianjing" />tianjing<br />
<input type="checkbox" name="ck" value="anhui" />anhui<br />
<input type="checkbox" name="ck" value="hefei" />hefei<br />
<input type="checkbox" name="ck" value="chongqing" />chongqing<br />
<p id="showp" style="background-color:yellow"></p>
</body>
9.JQuery的Dom操作
1.使用html()方法读取或者设置元素的innerHTML;
alert($("a:first").html());
$("a:first").html("hello");
2.使用text()方法获取或者设置元素的innerText;
alert($("a:first").text();
$("a:first").text("hello");
3.使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性用attr进行操作.
alert($("a:first").attr("href"));
$("a:first").attr("href","http://www.rupeng.com");
4.使用removeAttr删除属性.删除的属性在源代码中看不到,这是和清空属性的区别.
5.使用$(html字符串)来创建Dom节点,并且返回一个JQuery对象,然后调用append等方法将新创建的节点添加到Dom中.
$()创建的就是一个JQuery对象,可以完全进行操作.
append方法用来在元素末尾追加元素.
prepend在元素的开始添加元素
after在元素之后添加元素(添加兄弟)
before在元素之前添加元素(添加兄弟)
实现动态添加超链接:(添加的是子)
<script type="text/javascript">
$(function () {
var hrefs = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "CCTV": "http://www.cctv.com" };
var href;
$.each(hrefs, function (key, value) { href += ("<tr><td><a href='" + value + "'>" + key + "</a></td></tr>") });
$("#tb").append(href);
});
</script>
</head>
<body>
<div>以下是动态创建的超链接:</div>
<table id="tb"></table>
</body>
6.remove()删除选择的节点,remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点.比如重新添加到其他节点下.
var lis=$("#ulSite li").remove();
$("#ulSite2").append(lis);
$("ul li[class=testitem]").remove()等价于$("ul li.testitem").remove()
动态删除节点
$(function () { $("#btn1").click(function () { $("ul li.testitem").remove();}) });
</script>
</head>
<body>
<div>以下是动态创建的超链接:</div>
<table id="tb"></table>
<input type="button" id="btn1" value="deleteyelloitem" /><br />
<ul>
<li class="testitem">abc</li>
<li>abc</li>
<li class="testitem">abc</li>
<li>abc</li>
</ul>
</body>
7.empty()是将节点清空.
10.样式操作
获取样式attr("class"),
设置样式attr("class","myclass"),
追加样式addClass("myclass"),
移除样式removeClass("myclass")
切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),
判断是否存在样式:hasClass("myclass")
11.RadioButton操作
<1>取得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="未知"/>未知</p>
<2>设置RadioButton的选中值
$("input[name=gender]").val(["女"]);//[]不能省略
或者
$(":radio[name=gender]").val(["女"]);
注意val中参数的[]不能省略
12.JQuery事件属性及移除事件绑定和一次性事件
<1>属性:pageX/pageY/target获得触发事件的元素(冒泡的起始,和this不一样),which如果是鼠标事件获得按键(1左键,2中键,3右键).
altKey/shiftKey/ctrlKey获得alt/shift/ctrl是否按下,为bool值.
keyCode/charCode属性是发生事件时候的keyCode(键盘码,小键盘的1和主键盘的keyCode不一样)/charCode(ASC码)
<2>移除事件绑定:bind()方法即可移除元素上所有绑定的事件,如果unbind("click")则移除click事件的绑定.bind:+=;unbind:-=
<3>一次性事件:如果绑定的时间只想执行一次随后立即unbind可以使用one()方法进行事件绑定.
示例代码:
1.获得发生事件时鼠标的位置
$(document).mousemove(function (e) { document.title=e.pageX+","+e.pageY});
2.一次性事件
$(function () { $("#oneevent").one("click", function () { alert("for one event")})});
13.实现鼠标移到缩略图在鼠标位置显示大图
<script type="text/javascript">
var data = {
"js/meinv1small.jpg": ["/js/meinv1.jpg", "美女1号", "180"],
"js/meinv2small.jpg": ["/js/meinv2.jpg", "美女2号", "185"],
"js/meinv3small.jpg": ["/js/meinv3.jpg", "美女3号", "170"],
};
$(function () {
$.each(data, function (key,value) {
var smallimg = $("<img src='/" + key + "'>");
smallimg.attr("detailpath", value[0]);
smallimg.attr("detailname", value[1]);
smallimg.attr("detailheight", value[2]);
smallimg.mousemove(function (e) {
$("#imgdetail").attr("src", $(this).attr("detailpath"));
$("#namedetail").text($(this).attr("detailname"));
$("#heightdetail").text($(this).attr("detailheight"));
$("#forimg").css("display","").css("left",e.pageX).css("top",e.pageY);
});
$("body").append(smallimg);
})
$("#detailclose").click(function () { $("#forimg").css("display", "none")});
});
</script>
<body>
<div id="forimg" style="display:none;position:absolute">
<img id="imgdetail" src="" />
<p id="namedetail"></p>
<p id="heightdetail"></p>
<input type="button" id="detailclose" value="close" />
</div>
</body>
14.类似QQ好友点击效果
<style type="text/css">
.head {
font-weight:bolder;background-color:gray;cursor:pointer;
}
.body {
font-weight:lighter;background-color:yellow;
}
</style>
<script type="text/javascript">
$(function () {
$("#ul1 li:odd").addClass("body").click(function () { alert("clicked")}); $("#ul1 li:even").addClass("head").click(function () {
$(this).next("li.body").show("normal").siblings("li.body").hide("normal");
})
});
</script>
<ul style="list-style-type:none;width:200px" id="ul1">
<li>我的好友</li>
<li>张三<br />李四<br />王五<br /></li>
<li>我的同学</li>
<li>奥巴马<br />本拉登<br />习近平<br /></li>
<li>陌生人</li>
<li>eason<br />张惠妹<br />汪峰<br /></li>
</ul>
15.JQuery插件之一:JQuery cookie
1.什么是cookie:Cookie就是保存在浏览器上的内容,用户在这次浏览页面的时候向Cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次"记忆的内容".Cookie不是JQuery特有的概念,只不过JQueryCookie把它简化的更好而已.
2.Cookie需要浏览器的支持,浏览器的Cookie是可以禁用的,如果禁用了Cookie就不能使用了,不过一般不考虑禁用Cookie的情况.Cookie的几个特征:Cookie是与域名相关的,所有163.com不能读取baidu.com记录的Cookie,正因为如此读取/设置Cookie的时候不用担心不同域名cookie的冲突,一个域名能写入的Cookie总尺寸是有限制的,一般是几千个字节,能写入的Cookie总条数一般是几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie;Cookie不是写入以后一定下次读出来,浏览器可能会定期清除,用户也可能会手动清除.
3.使用方法:
<1>添加对jquery.cookie.js
<2>设置值,$.cookie('名字','值').cookie中保存的值都是文本.
<3>读取值,var v=$.cookie('名字')
<4>设置值的时候可以指定第三个参数,$.cookie('名字','值'{expiress:7,path:'/',domain:'itcast.cn',secure:true})
16.常用测试工具
<1>DebugBar->IE的
<2>IE8内置了开发人员工具(工具->开发人员工具),IE6/7需要安装Internet Explorer Developer Toolbar
<3>Firebug->FireFox下的
<4>多版本IE工具:IECollection,比IETester更强大.
17.JQuery常用插件:JQueryUI
1.JQuery官方UI空间JQueryUI
查看内容下index可以查看常用功能,然后保存成源文件进行查看用法.
<1>将css文件夹和JQueryUI.js放到程序中,然后引用,就可以直接调用了.
http://jqueryui.com/
2.JQuery.validate表单验证插件
3.Form,用于为表单提供直接的Ajax能力
4.所有插件列表http://plugins.jquery.com/
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a
href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------
href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------
1.JQuery简介
普通的JavaScript的缺点：每种空间的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Doio、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了研发。和谐库对JavaScript的封装，也就是我们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript预压写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件仍然需要JavaScript的技术，JQuery本身就是一堆JavaScript函数。
JQuery是最火的JavaScript库，已经被集成到VS2010中了，得到了MS的支持，MS的Ajax、toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。
JQuery可以和JavaScript混合使用.就像在MFC中依然可以调用WIN32函数
2.JQuery之ready
$(document).ready(function(){alert("加载完毕");})//注册事件函数，和普通dom不一样，不需要在元素上标记on**这样的事件。
DOM中的事件onload只能注册一次，后注册的取代先注册的。而ready则可以多次注册都会被执行。
onload是所有dom元素创建完成，，图片、css等都加载完毕后才被触发，而ready则是dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在JQuery中也可以用$(window).load()来实现onload那种事件调用的时机。
当页面Dom元素加载完毕时执行代码，可以简写为：
$(function(){alert("加载完毕！");});
3.JQuery提供的一些函数
<1>$.map(array,fn)对数组array中的每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新的array。
var arr=[3,5,9];
var arr2=$.map(arr,function(item){return item*2})；
$.map不能处理Dictionary风格的数组。
<2>$.each(array,fn)对数组array每个元素调用fn函数进行处理，没有返回值。
var arr={"tom":"汤姆","jim":"吉姆","jerry":"杰瑞"};
$each(arr.function(key,vlaue){alert(key+"="+value);});
如果是普通风格的数组，则key的值是序号。
$each(arr.function(key){alert(key)});
单个元素取得key。
$each(arr.function(){alert(this)});
没有参数使用this取得value。
4.JQuery对象和Dom对象
JQuery对象就是通过JQuery包装Dom对象后产生的对象。
<1>alert($('#div1').html())。Dom对象要通过JQuery进行操作，先要转换为JQuery对象进行操作。
$('#div1').html()等价于:document.getElementById("div1").innerHTML。
$('#div1')得到的就是JQuery对象，JQuery对象只能调用JQuery对象封装的方法，不能调用Dom对象方法和属性。
Array是JS语言本身的对象，不是Dom独享，因此不需要转换为JQuery对象才能用。
<2>将JQuery对象转换为Dom对象的方法，$(dom对象);当调用JQuery没有封装方法的时候必须用Dom对象，转换方法 var domobj=jqobj[0]或者var domobj=jqobj.get(0)
var div1_2=$(div1)[0];alert(div1_2.innerHTML);
<3>JQuery修改样式：$('#div1').css("background","red");
获得样式$("#div1").css("background");
修改value:$("#un").val("abc")
获得value:$("#un").val().类型的获得、设置innerText、innerHTML用text()和html()。
5.JQuery选择器
<1>JQuery选择器用户查找满足条件的元素，比如可以用$("#控件id")来格局空间id获得空间的JQuery对象，相当于getElementById:$("#div1").html("<font color=red>hello</font>")
<2>$("TagName")来获取指定标签的JQuery对象，相当于getElementsByTagName:
$(function(){$("p").click(function(){laert("we are p")});})在加载完成以后再调用，否则没有对象。隐式迭代，给所有选择出来的元素增加click事件。
<3>CSS选择器，同事选择拥有样式的多个元素。
<style type="text/css">
.test{background-color:red}
</style>
<script type="text/javascript">
$(function(){$(".test").click(function(){alert($(this).text());})};
</script>
<p class="test">test1</p>
<p class="test">test2</p>
<p class="test">test3</p>
<4>多条件选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素。
注意选择器表达式中的空格不能多不能少。
<5>层次选择器:
(1)$("div li")获取div下的所有li元素(后代，子、子的子...)
(2)$("div>li")获取div下的li子元素。
(3)$(".menuitem+div")获取样式名为menuitem之后第一个div元素（不常用）。
(4)$(".menuitem~div")获取样式名为menuitem之后所有的div元素（不常用）。
6.节点遍历
next()方法用户获取节点之后的第一个同辈元素,$(".menuitem").next("div")
nextAll("div")方法用于获取方法
后面括号是一个筛选器.
siblings()方法用户获取所有同辈元素,$("menuitem").siblings("li")
替换节点
$("br").replaceWith("<hr/>");
将<br/>替换为<hr/>将回车换行替换为横线
包裹节点
wrap()方法用来将所有元素逐个用指定标签包裹
$("b").wrap("<font color='red'></font>")将所有粗体字红色显示
7.基本过滤选择器
相对定位:$("div:first",$(this))指定上下文context就会从指定位置开始.
<1>:first选取第一个元素$("div:first")选取第一个<div>
<2>:last选取最后一个元素$("div:last")选取最后一个<div>
<3>:not(选择器)选择不满足"选择器"条件的元素$("input:not(.myClass)")选取样式名不是myClass的<input>
<4>:even/:odd,选取索引是奇数,偶数的元素:$("input:even")
<5>:eq(索引序号)/:gt(索引序号)/:lt(索引序号)选取索引等于/大于/小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
<6>$(":header")选取所有的h1....h6元素.(*)
<7>$("div:animated")选取正在执行动画的<div>元素.(*)
<8>属性过滤选择器
$("div[id]")选取有id属性的<div>
$("div[title=test]")选取title属性为"test"的<div>
$("div[title!=test]")选取title属性不为test的<div>
$("input[name=abc]") getElementsByName进行封装
还可以选择开头/结束/包含等,条件还可以符合.
<9>表单对象选择器:
$("#form1:enabled")选取id为form1的表单内所有的启用的元素
$("#form1:disabled")选取id为form1的表单内所有禁用的元素
$("input:checked")选取所有选中的元素(Radio/checkBox)
$("select:selected")选取所有选中的选项元素(下拉列表)
<10>表单选择器
$(":input")选取所有<input>/<textarea>/<select>和<button>元素.和$("input")不一样,$("input")只获得<input>.
$(":text")选取所欲单行文本框,等价于$("input:[type=text]")
$(":password")选取所有密码框.
同理还有:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden
8.JQuery元素的each
JQuery元素也可以调用each方法,只是对$.each的简化调用.
<script type="text/javascript">
4000
$(function () { $("input[name=ck]").click(function () {
var arr=new Array();
$("input[name=ck]:checked").each(function (key, value) { arr[key] = $(value).val() });
if (arr.length <= 0) {
$("#showp").text("No checkedbox had been checked!");
return;
}
$("#showp").text(arr.join(',')+"has been checked!");
})
});
</script>
</head>
<body>
<input type="checkbox" name="ck" value="beijing" />beijing<br />
<input type="checkbox" name="ck" value="nanjing" />nanjing<br />
<input type="checkbox" name="ck" value="shanghai" />shanghai<br />
<input type="checkbox" name="ck" value="tianjing" />tianjing<br />
<input type="checkbox" name="ck" value="anhui" />anhui<br />
<input type="checkbox" name="ck" value="hefei" />hefei<br />
<input type="checkbox" name="ck" value="chongqing" />chongqing<br />
<p id="showp" style="background-color:yellow"></p>
</body>
9.JQuery的Dom操作
1.使用html()方法读取或者设置元素的innerHTML;
alert($("a:first").html());
$("a:first").html("hello");
2.使用text()方法获取或者设置元素的innerText;
alert($("a:first").text();
$("a:first").text("hello");
3.使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性用attr进行操作.
alert($("a:first").attr("href"));
$("a:first").attr("href","http://www.rupeng.com");
4.使用removeAttr删除属性.删除的属性在源代码中看不到,这是和清空属性的区别.
5.使用$(html字符串)来创建Dom节点,并且返回一个JQuery对象,然后调用append等方法将新创建的节点添加到Dom中.
$()创建的就是一个JQuery对象,可以完全进行操作.
append方法用来在元素末尾追加元素.
prepend在元素的开始添加元素
after在元素之后添加元素(添加兄弟)
before在元素之前添加元素(添加兄弟)
实现动态添加超链接:(添加的是子)
<script type="text/javascript">
$(function () {
var hrefs = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "CCTV": "http://www.cctv.com" };
var href;
$.each(hrefs, function (key, value) { href += ("<tr><td><a href='" + value + "'>" + key + "</a></td></tr>") });
$("#tb").append(href);
});
</script>
</head>
<body>
<div>以下是动态创建的超链接:</div>
<table id="tb"></table>
</body>
6.remove()删除选择的节点,remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点.比如重新添加到其他节点下.
var lis=$("#ulSite li").remove();
$("#ulSite2").append(lis);
$("ul li[class=testitem]").remove()等价于$("ul li.testitem").remove()
动态删除节点
$(function () { $("#btn1").click(function () { $("ul li.testitem").remove();}) });
</script>
</head>
<body>
<div>以下是动态创建的超链接:</div>
<table id="tb"></table>
<input type="button" id="btn1" value="deleteyelloitem" /><br />
<ul>
<li class="testitem">abc</li>
<li>abc</li>
<li class="testitem">abc</li>
<li>abc</li>
</ul>
</body>
7.empty()是将节点清空.
10.样式操作
获取样式attr("class"),
设置样式attr("class","myclass"),
追加样式addClass("myclass"),
移除样式removeClass("myclass")
切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),
判断是否存在样式:hasClass("myclass")
11.RadioButton操作
<1>取得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="未知"/>未知</p>
<2>设置RadioButton的选中值
$("input[name=gender]").val(["女"]);//[]不能省略
或者
$(":radio[name=gender]").val(["女"]);
注意val中参数的[]不能省略
12.JQuery事件属性及移除事件绑定和一次性事件
<1>属性:pageX/pageY/target获得触发事件的元素(冒泡的起始,和this不一样),which如果是鼠标事件获得按键(1左键,2中键,3右键).
altKey/shiftKey/ctrlKey获得alt/shift/ctrl是否按下,为bool值.
keyCode/charCode属性是发生事件时候的keyCode(键盘码,小键盘的1和主键盘的keyCode不一样)/charCode(ASC码)
<2>移除事件绑定:bind()方法即可移除元素上所有绑定的事件,如果unbind("click")则移除click事件的绑定.bind:+=;unbind:-=
<3>一次性事件:如果绑定的时间只想执行一次随后立即unbind可以使用one()方法进行事件绑定.
示例代码:
1.获得发生事件时鼠标的位置
$(document).mousemove(function (e) { document.title=e.pageX+","+e.pageY});
2.一次性事件
$(function () { $("#oneevent").one("click", function () { alert("for one event")})});
13.实现鼠标移到缩略图在鼠标位置显示大图
<script type="text/javascript">
var data = {
"js/meinv1small.jpg": ["/js/meinv1.jpg", "美女1号", "180"],
"js/meinv2small.jpg": ["/js/meinv2.jpg", "美女2号", "185"],
"js/meinv3small.jpg": ["/js/meinv3.jpg", "美女3号", "170"],
};
$(function () {
$.each(data, function (key,value) {
var smallimg = $("<img src='/" + key + "'>");
smallimg.attr("detailpath", value[0]);
smallimg.attr("detailname", value[1]);
smallimg.attr("detailheight", value[2]);
smallimg.mousemove(function (e) {
$("#imgdetail").attr("src", $(this).attr("detailpath"));
$("#namedetail").text($(this).attr("detailname"));
$("#heightdetail").text($(this).attr("detailheight"));
$("#forimg").css("display","").css("left",e.pageX).css("top",e.pageY);
});
$("body").append(smallimg);
})
$("#detailclose").click(function () { $("#forimg").css("display", "none")});
});
</script>
<body>
<div id="forimg" style="display:none;position:absolute">
<img id="imgdetail" src="" />
<p id="namedetail"></p>
<p id="heightdetail"></p>
<input type="button" id="detailclose" value="close" />
</div>
</body>
14.类似QQ好友点击效果
<style type="text/css">
.head {
font-weight:bolder;background-color:gray;cursor:pointer;
}
.body {
font-weight:lighter;background-color:yellow;
}
</style>
<script type="text/javascript">
$(function () {
$("#ul1 li:odd").addClass("body").click(function () { alert("clicked")}); $("#ul1 li:even").addClass("head").click(function () {
$(this).next("li.body").show("normal").siblings("li.body").hide("normal");
})
});
</script>
<ul style="list-style-type:none;width:200px" id="ul1">
<li>我的好友</li>
<li>张三<br />李四<br />王五<br /></li>
<li>我的同学</li>
<li>奥巴马<br />本拉登<br />习近平<br /></li>
<li>陌生人</li>
<li>eason<br />张惠妹<br />汪峰<br /></li>
</ul>
15.JQuery插件之一:JQuery cookie
1.什么是cookie:Cookie就是保存在浏览器上的内容,用户在这次浏览页面的时候向Cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次"记忆的内容".Cookie不是JQuery特有的概念,只不过JQueryCookie把它简化的更好而已.
2.Cookie需要浏览器的支持,浏览器的Cookie是可以禁用的,如果禁用了Cookie就不能使用了,不过一般不考虑禁用Cookie的情况.Cookie的几个特征:Cookie是与域名相关的,所有163.com不能读取baidu.com记录的Cookie,正因为如此读取/设置Cookie的时候不用担心不同域名cookie的冲突,一个域名能写入的Cookie总尺寸是有限制的,一般是几千个字节,能写入的Cookie总条数一般是几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie;Cookie不是写入以后一定下次读出来,浏览器可能会定期清除,用户也可能会手动清除.
3.使用方法:
<1>添加对jquery.cookie.js
<2>设置值,$.cookie('名字','值').cookie中保存的值都是文本.
<3>读取值,var v=$.cookie('名字')
<4>设置值的时候可以指定第三个参数,$.cookie('名字','值'{expiress:7,path:'/',domain:'itcast.cn',secure:true})
16.常用测试工具
<1>DebugBar->IE的
<2>IE8内置了开发人员工具(工具->开发人员工具),IE6/7需要安装Internet Explorer Developer Toolbar
<3>Firebug->FireFox下的
<4>多版本IE工具:IECollection,比IETester更强大.
17.JQuery常用插件:JQueryUI
1.JQuery官方UI空间JQueryUI
查看内容下index可以查看常用功能,然后保存成源文件进行查看用法.
<1>将css文件夹和JQueryUI.js放到程序中,然后引用,就可以直接调用了.
http://jqueryui.com/
2.JQuery.validate表单验证插件
3.Form,用于为表单提供直接的Ajax能力
4.所有插件列表http://plugins.jquery.com/
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a
href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员--Jquery 学习笔记
- 黑马程序员之 ASP.NET学习笔记:jquery+ajax无刷新分页代码
- 黑马程序员之jquery学习笔记:jquery特效之金额文本框代码
- 黑马程序员---OC学习笔记之常见结构体
- 黑马程序员 JAVA学习笔记——java基础 单例设计模式
- JQuery学习笔记之鼠标的各种事件
- 黑马程序员 异常处理的学习笔记
- JQuery学习笔记之淡入和淡出
- 20151209jquery学习笔记Ajax 代码备份
- 【学习笔记】jQuery知识点
- 黑马程序员_java jdk5.0新特性和枚举的学习笔记
- jQuery之层级选择器学习笔记
- jQuery 学习笔记
- 黑马程序员--- 学习笔记(第八天)
- 黑马程序员——java基础学习笔记——第四天
- 黑马程序员_毕向东_Java基础视频教程学习笔记（七）
- JAVA集合框架 黑马程序员学习笔记（11）
- Jquery学习笔记：利用parent和parents方法获取父节点
- jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]
- 黑马程序员_学习笔记第24天——网络编程