12.JQuery过滤器
!属性过滤选择器:
$("div[id]")选取有id属性的<div>
$("div[title=test]")选取title属性为"test"的<div>, Jquery中没有对getElementsByName警醒封装,用$("div[title!=test]")选取title属性不为"test"的<div>
还可以选择开头,结束,包含等,条件还可以复合. (*)
!表单对象选择器(过滤器)
$("#form1:enabled")选取id为form1的表单内所有启用的元素
$("#form1:disabled")选取id为form1的表单内所有禁用的元素
$("input:checked")选取所有选中的元素(Radio, CheckBox),没有空格
$("select:selected")选取所有选中的选项元素(下拉元素)
练习:使用checkbox , 使用each,
<script type="text/javascript">
$( function () {
$( "input[name=names]").click(function () {
var arr = new Array();
$( "input:checked").each(function (key, value) { arr[key] = $(value).val(); });
$( "#msgShow").text("一共选中" +arr.length+"项:"+arr.join( ','));
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<input type="checkbox" name="names" value="tom" />tom
<input type="checkbox" name="names" value="lili" />lili
<input type="checkbox" name="names" value="join" />join
</div>
<p id="msgShow"></p >
</form>
</body>
13.表单选择器
$(":input")选取所有<input>,<textarea>,<select>和<button>元素, 和$("input")不一样,$("input")只获得<input>,前者获得所有提交的表单
$(":text")选取所有单行文本框, 等价于$("input:[type=text]")
$(":password")选取所有密码框.同理还有":radio, :checkbox, :submit,:image, :reset, :button, :file, :hidden
14.JQuery的Dom操作
一.使用html()方法读取或者设置元素的innerHTML
alert($("a:first").html()); $("a:first").html("hello");
二.使用text()方法读取设置元素的innerText;
三.使用attr()方法读取或者设置元素的属性, 对于Jquery没有封装的属性用attr进行操作
alert($("a:first").attr("href")); //显示第一个a标签的href值
$("a:first").attr("href","http://www.baidu.com ")
四.使用removeAttr删除属性,是删除,比如删除href,就是把href属性从标签里面移除
15.动态创建Dom节点
一.使用$(html字符串)创建Dom节点,返回jquery对象,在调用append方法创建新的节点添加到dom中
二.$()穿件的就是一个jquery对象,可以进行完全的操作
var link = $("<a href='http://www.baidu.com'>百度</a>");
link.text("白毒");
link.attr("href","http://www.sina.com");
$("div:first").append(link);
三.append方法用来在元素的末尾追加元素
prepend, 元素的开始添加元素
after, 元素之后添加元素(添加兄弟)
before 在元素之前添加元素(添加兄弟)
四.删除选择的节点
案例 $("ul li.classFirst").remove(); 删除所有的ul下,样式为classFirst的节点
五.remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点.
六.empty清空,没有返回值的
练习: 1.动态生成网站列表, 实现无刷新分页
2.删除节点,使用remove()方法
3.选项框里面,进行移动
4.加法计算器,按=实现数字相加,求结果
5.15秒后协议文本的注册,时钟倒数(btn.disabled = true),文字也要现实
6.无刷新评论 点击评论按钮 动态增加一行 <li></li>
7.三个输入文本,光标离开文本框(文本框为空)设置背景色为红色,不为空显示白色. 提示:焦点进入控件的事件时onfocus,离开是onblur
8.超链接的单选效果,页面上若干个超链接, 点击一个超链接的时候被点击的超链接变红色背景,其他为白色背景.参考:点击 呜呜,没点击 "哈哈" window.event.returnValue=false 难点"this"
-------------------练习1----------------------
<script type="text/javascript">
$( function () {
var data1 = { "百度" : "http://www.baidu.com", "谷歌": "http://www.google.cn" };
var data2 = { "搜狐" : "http://www.sohu.com", "新浪": "http://www.sina.com" };
$( "#btnPre").click(function () {
$( "#table1 tr:lt(2)").remove();
$.each(data1, function (key, value) {
var tr = $("<tr><td><a href='" + value + "'>" + key + "</a></td></tr>" );
$( "#table1").append(tr);
});
});
$( "#btnNext").click(function () {
$( "#table1 tr:lt(2)").remove();
$.each(data2, function (key, value) {
var tr = $("<tr><td><a href='" + value + "'>" + key + "</a></td></tr>" );
$( "#table1").append(tr);
});
});
});
</script>
-------------------练习2----------------------
$(function () { $( "#del").click(function () { $("#select1 option:selected").remove() }); });
-------------------练习3----------------------
$(function () { $( "#next").click(function () { $("#select2").append($( "#select1 option:selected" ).remove()); }); });
-------------------练习4----------------------
$(function () { $( "#calculate").click(function () { $("#result").val(parseInt($( "#first").val(), 10) + parseInt($("#second" ).val(), 10)); }); });
-------------------练习5----------------------
$(function () {
$( "#register").attr("disabled" , true);
var times = 5;
var timeId = setInterval(function () {
alert( "22222");
if (times <= 0) {
$( "#register").attr("disabled" , false).val( "注册");
clearInterval(timeId);
return;
}
$( "#register").val("请仔细看一下协议,还剩" + times + "秒");
times--;
}, 1000);
});
-------------------练习6----------------------
$(function () { $( "#submit").click(function () { $("ul:first").append($( "<li>"+$("#txt" ).text()+"</li>")); }); });
-------------------练习7----------------------
$(function () {
$( ":text").blur(function () {
var tt = $(this );
if (tt.val() <= "" ) {
tt.css( "background", "red" );
}
else {
tt.css( "background", "white" );
}
});
});
-------------------练习8----------------------
$(function () { $( "a").click(function () { $(this).css( "background", "red" ).siblings().css("background", "white") }); })
-------------------练习9球队选择---------------------
$(function () {
$( "#ul1 li").css("cursor" ,"pointer").mouseover( function () {
$( this).css("background" , "red").siblings().css( "background", "white" );
}).click( function () {
$( this).css("background" , "white").appendTo( "#ul2");
});
})
16.样式操作
获取样式 attr("class"), 设置样式attr("class","myclass"), 追加样式addClass("myclass"), 移除样式remove("myclass"), 切换样式(没有添加,有去除添加) toggleClass("myclass"), 判断是否存在样式 hasClass("myclass")
案例:网页开灯效果 灰度过滤效果
$(function () { $( "#btn").click(function () { $(document.body).toggleClass( "blackwhite") }) });
$( function () { $("#kgd" ).click(function () { $(document.body).toggleClass( "kgd") }) });
.blackwhite{ filter :Gray}
.kgd{ background-color :Black}
练习: 搜索框效果 焦点翻入空间 , 如果文本框中的值是请输入关键词,那么将文本清空,并且将颜色设置为黑色.如果焦点离开空间,如果文本框为空值,填入灰色的"请输入关键词"
代码:
$(function () {
$( "#txt").val("请输入关键词" ).focus(function () { //焦点进入文本框判断是否删除文本,切换样式
if ($(this ).val() == "请输入关键词") {
$( this).val("" ).toggleClass("txtFull");
}
}).blur( function () { //焦点离开文本.空:写入默认值,切换样式; 非空:不操作
if ($("#txt" ).val() == "") {
$( "#txt").val("请输入关键词" ).toggleClass("txtFull");
}
});
});
17.节点操作
一.替换节点:
$("br").replaceWith("<hr/>"); //回车变成横线
二.包裹节点
$("p").wrap("<font color='red'></font>")
18.RadioButton操作
一.$("input[name=gender]:checked").val()
二.设置RadioButton的选中值
$(":radio[name=gender]").val(["女"])
案例: 性别选择
$(function () {
$( "#getValue").click(function () { //获得选中的radioButton的value
alert($( ":radio[name=gender]:checked" ).val());
});
$( "#setValue").click(function () { //设置默认值,注意不要丢了[]
$( ":radio[name=gender]").val(["女" ]);
$( ":checkbox").val(["篮球" ,"网球"]);
});
});
19.RadioButton操作2
一.对RadioButton的选择技巧对于CheckBox和Select列表框也适用
二.除了可以使用val批量设置RadioButton,CheckBox等的选中以外,还可以设定checked属性来单独设置控件的选中状态
$("btn1").attr("checked","true")
练习: checkBox的全选, 全不选, 反选
$( "#btnAll").click(function () { $(":checkbox").attr( "checked", true ); }); //全选
$( "#btnNon").click(function () { $(":checkbox").attr( "checked", false ); }); //全不选
$( "#btnOps").click(function () { $(":checkbox").each( function () { $(this ).attr("checked", !$(this).attr("checked" )); }); }); //反选
20.事件
一.JQuery事件绑定: $("#btn").bind("click",function(){ }), 每次调用比较麻烦, 简化$("#btn").click(function(){ })
二.鼠标进入, 离开事件
$(*).mouseenter(fn1).mouselease(fn2) == $(*).hover(fn1,fn2)
三.事件冒泡 JQuery和Javascript同样有事件冒泡 比如: 点击里层的标签,依次激发外层标签的点击事件
四.阻止冒泡 e.stopPropagation()
多层次中的期中一层的click事件 $(*).click(function(e){ ...; e.stopPropagation(); })
五.阻止表单提交,和超级链接转向 e.preventDefault(); 还有 onclick="window.event.returnValue=false"
也可以进行阻止
$("a").click(function(e) {e.preventDefault() }) //阻止所有的超级链接
六.属性: pageX, pageY, target获得触发事件的元素(冒泡的起始,和this不一样) ,which如果是鼠标事件获得按键(1左键 2中建 3右键) altKey,shiftKey,ctrlKey,获得alt,shift,ctrl是否按下,为bool值. keyCode属性发生事件时的keyCode( 键盘码, 小键盘的1和主键盘的keyCode不一样,charCode是一样的,是ASC码)
七:移除事件绑定 unbind()移除元素上所有的事件, unbind("click")只能移除click事件的绑定
bind: +=
unbind: -=
八.一次性事件 只执行一次的事件,使用one()方法事件绑定 one("click",fn)一次点击
this随监听事件改变,为当前的监听对象,
target对应的是最原始触发事件的对象 同srcElement
21.鼠标
一.在mousemove,click等时间的匿名响应函数中如果制定一个参数e.那么就可以从e读取发生时间是的一些信息, 比如对于mousemove等鼠标事件来说,就可以读取e.pageX, e.pageY来获得发生事件时鼠标在页面的坐标
二.坐标 e.pageX; e.pageY;
练习: 图片随着鼠标走 注意div的style="position:absolute"
$(document).mousemove( function (e) {
$( "#fly").css("left" ,e.pageX).css("top",e.pageY);
});
三.练习美女图片详细解析层
//用AJEX传入
var data = { "images/LDH_S.jpg" : ["images/LDH.jpg", "刘德华" , "170"],
"images/LYF_S.jpg": ["images/LYF.jpg" , "刘亦菲", "160" ],
"images/ZJL_S.jpg": ["images/ZJL.jpg" , "周杰伦", "170" ]
};
$( function () {
$.each(data, function (key, value) {
var small = $("<img alt='Sorry' src='" + key + "' />")
small.attr( "bigmappath", value[0]);
small.attr( "personname", value[1]);
small.attr( "personheight", value[2]);
$( "#divS").append(small);
$(small).mousemove( function (e) {
$( "#detail").css("display" , "").css( "left", e.pageX).css("top" , e.pageY);
$( "#bigmap").attr("src" , $(this).attr( "bigmappath"));
$( "#detailname").text($(this ).attr("personname"));
$( "#detailheight").text($(this ).attr("personheight"));
$( "#detailclose").click(function () { $("#detail").css( "display", "none" ); });
});
});
});
21.动画
一. show(), hide() 方法显示,隐藏元素. 用toggle()方法进行显示,隐藏切换
$(*).click(function(){ $(this).hide(fast) })
hide()里面可以增加参数,毫秒为单位 fast(200ms), slow()
练习: 模拟qq列表
$(function () {
$( "#qq li:odd").addClass("body" ).hide(); //设置子项样式并隐藏
$( "#qq li:even").addClass("head" ).click(function () {
$( this).next("li.body" ).toggle("fast");
}); //设置父项样式并写点击事件
});
ul{ list-style-type :none}
.head{ background-color :Red}
.body{ border-color :Blue; border-bottom-style:solid ; border-bottom- 2px}
二.其他在具体可以看书,这里不是重点
22.JQuery插件: Jquery cookie
一.什么是cookie: Cookie就是保存在浏览器上的呢绒,用户在这次浏览网页的时候向cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次"记忆"的内容/ Cookie不是Jquery特有的概念,只不过JqueryCookie把它简化得更好用而已.Cookie就是存储在浏览器里的一些数据.
二.Cookie需要浏览器的支持,浏览器的Cookie就是可以禁用,如果禁用了Cookie就不能使用了,不过一般不用考虑禁用Cookie的情况.Cookie的几个特性: Cookie是与域名相关的, 所以163.com不能读取baidu.com的cookie,正因为如此读取,设置cookie的时候不用担心不同域名cookie的冲突; 一个域名能写入Cookie总尺度是有限制的,一般是几千字节,能写入的Cookie总条数一般为几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie; Cookie不是写入后一定下次能读出来,cookie是可以手工删除的.
22.Jquery cookie的使用
一.使用方法, Cookie保存的是键值对
1)添加jquery.cookie.js
2)赋值$.cookie("用户名","tom"); cookie中保存的值都是文本
3)取值$.cookie("用户名");
二.设置值得时候还可以指定第三个参数,$.cookie("名字","值",{expires:7,path:"/",domain:"itast.cn",secure:true}) {*时间:7天,'',*允许访问域名,}
练习:
$(function () {
if ($.cookie("BgColor" )) {
$(document.body).css( "background", $.cookie("BgColor" ));
}
$( "#BgGreen").click(function () { $(document.body).css("background", "Green"); $.cookie("BgColor" ,"Green"); });
$( "#BgRed").click(function () { $(document.body).css("background", "Red"); $.cookie("BgColor" , "Red"); });
$( "#BgYellow").click(function () { $(document.body).css("background", "Yellow"); $.cookie("BgColor" , "Yellow"); });
});
23.常用Jquery插件
一.JQuery官方的UI控件 JWueryUI
延时常用方法,分析代码
二.JQuery.validate 表单验证插件
三.form 用于为表单提供直接ajax能力
四.所有插件列表 http://plugins.jquery.con
24.IE调试工具
debugbar 查看网页代码
ie自带的调试工具也很不错
最后.随记
如果报错"例外被抛出"等,很可能是选择器表达式有问题,比如单词拼写错误,加了不必要的空格等.val是方法不是属性.JQuery是完全按照js的语法写出来的函数库,完全符合js规范,因此完全可以和普通js代码混着用,但最好不要dom和jquery混着用.
$("body *").click() //body下所有控件的点击事件
如果想要获得事件的相关信息,可以在function(e)传入参数中引入e
this 和 element
结论:this是监听当前的事件的对象,而event.srcElement是引发事件的对象.
当event发生时，srcElement和target是返回事件的目标节点（触发该事件的节点），即直接引发事件的那个元素。
this返回的则是定义了该event响应函数的那个元素。
动态添加标签时,必须先append后才能通过标签来赋值