JQuery 学习总结及实例
来源:互联网 发布:淘宝店童装货源 编辑:程序博客网 时间:2024/06/10 20:22
http://www.cnblogs.com/daomul/archive/2013/04/26/3037737.html
1、JQuery简介
4、JQuery对象和Dom对象
5、JQuery 选择器
(1、$(“#div1”).html();
(2、$("TagName")来获取所有指定标签名的jQuery对象,相当于getElementsByTagName:
例如获得所有的P:$("p").html("我们都是P");
(3、标签选择器,拥有样式的标签选择器
6、JQuery的迭代
(2、$(".menuitem").next("div") 、 nextAll() 方法用于获取节点之后的所 有同辈元素, $(".menuitem").nextAll("div") prev 、 prevAll 之前的元素
8、链式编程
链式编程就是对象一棒棒向下传,能不能正确传下来要看返回值,html()不能传,prevAll().nextAll()也传错。
$("#tableRating td").click(function() {$(this).prevAll().next().html("a"); });//经典!
案例1:样式的增删:addClass和removeClass
案例2:五角星评分
9、基本过滤选择器
(1、:first 选取第一个元素。 $("div:first") 选取第一个 <div>
(2、:last 选取最后一个元素。 $("div:last") 选取最后一个 <div>
(3、:not( 选择器 ) 选取不满足 " 选择器 " 条件的元素,
$("input:not(.myClass)") 选取样式名不是 myClass 的 <input>
(4、:even 、 :odd ,选取索引是奇数、偶数的元素: $("input:even") 选
取索引是奇数的 <input>
(5、:eq( 索引序号 ) 、 :gt( 索引序号 ) 、 :lt( 索引序号 ) 选取索引等于、大于、小于索引序号的元素,比如 $("input:lt(5)") 选取索引小于 5 的 <input>
(6、$(":header") 选取所有的 h1 …… h6 元素( * )
$("div:animated") 选取正在执行动画的 <div> 元素。 ( * )
案例1:
$("#table1 tr:last").css("color", "red");
$("#table1 tr:gt(0):lt(3)").css("color", "red");//lt(3)是从gt(0)后得到的新序列中的序号,不要写成lt(4);
$("#table1 tr:gt(0):even").css("background", "red"); //表头不参与"正文表格的奇数行是红色背景",所以gt(0)去掉表头
10、相对选择器
不仅可以使用选择器进行进行绝对定位,还可以进行相对定位, (双重选择)
只要在 $() 指定第二个参数,第二个参数为相对的元素 . $("ul", $(this)).css("background", "red"); //ul下面的+包含本身=ul下面的本身
11、属性过滤选择器:
(1、$("div[id]") 选取有 id 属性的 <div>
(2、 $("div[title=test]") 选取 title 属性为 " test " 的 <div> , JQuery 中没有对getElementsByName 进行封装,用 $("input[name=abc]")
(3、$("div[title!=test]") 选取 title 属性不为 " test " 的 <div>
还可以选择开头、结束、包含等,条件还可以复合。( * )
12、表单对象选择器
$("#form1:enabled") 选取 id 为 form1 的表单内所有启用的元素
$("#form1:disabled") 选取 id 为 form1 的表单内所有禁用的元素
$("input:checked") 选取所有选中的元素( Radio 、 CheckBox )
$("select:selected") 选取所有选中的选项元素(下拉列表)
13、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 删除属性。删除的属性在源代码中看不到,这是和清空属性的区别
14、动态创建Dom节点
(1、使用 $(html 字符串) 来创建 Dom 节点,并且返回一个 jQuery 对象,然后调用 append 等方法将新创建的节点添加到 Dom 中:
例子:var link = $("<a href='http://www.baidu.com'> 百度 </a>");
$("div:first").append(link);
(2、$() 创建的就是一个 jQuery 对象,可以完全进行操作
var link = $("<a href='http://www.baidu.com'> 百度 </a>");
link.text("百度");
$("div:first").append(link);
(3、append 方法用来在元素的末尾追加元素。
//$("#select1 option:selected").remove().appendTo($("#select2")) ;
$("#select1 option:selected").appendTo($("#select2")) ;
prepend ,在元素的开始添加元素。
after ,在元素之后添加元素(添加兄弟)
before :在元素之前添加元素(添加兄弟)
15、删除节点
(1、remove() 删除选择的节点
案例:清空 ul 中的项, $("ul li.testitem").remove(); 删除 ul 下 li 中有 testitem 样式的元素。
remove 方法的返回值是被删除的节点对象,还可以继续使用被删除的节点。比如重新添加到其他节点下
var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis);
(2、remove掉后再重新移动: var items = $("#select1 option:selected").remove(); $("#select2").append(items);
更狠的: $("#select1 option:selected").appendTo($("#select2"))
(3、empty() 是将节点清空,不像 remove 那样还可以添加到其他元素中。
16、Dom实例改编
案例1:加法计算器
案例2:全选全部选按钮
案例3:倒计时注册页面
案例4:球队选择
17、节点操作
(1、替换节点: $("br").replaceWith("<hr/>");
例子:将 <br/> 替换为 <hr/> :$("br").replaceWith("<hr/>");
(2、包裹节点 :wrap() 方法用来将所有元素逐个用指定标签包裹:
$("b").wrap("<font color='red'></font>") 将所有粗体字红色显示
18、样式操作
判断是否存在样式: hasClass("myclass")
练习2:聚集控件高亮:$("body *") ,选择器 * 表示所有类型的控件
练习3:搜索框
20、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 中参数的 [] 不能省略
外,还可以设定 checked 属性来单独设置控件的选中状态
$("#btn1").attr("checked",true)
(2、合成事件 hover , hover(enterfn,leavefn) ,当鼠标放在元素上时调用enterfn 方法,当鼠标离开元素的时候调用 leavefn 方法
(3、事件冒泡: JQuery 中也像 JavaScript 一样是事件冒泡。如果想获得事件相关的信息,只要给响应的匿名函数增加一个参数: e ,
e 就是调用事件对象的 stopPropagation() 方法终止冒泡。 e. stopPropagation();
$("tr").click(function(e) { alert("tr 被点击 "); e.stopPropagation(); });// 注意函数的参数是 e
(4、阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新链接、提交按钮默认会提交表单,
如果想阻止默认行为只要调用事件对象的preventDefault() 方法和 window.event.returnValue=false 效果一样。
$("a").click(function(e) { alert(" 所有超链接暂时全部禁止点击 ");
e.preventDefault(); });
(1、属性: pageX 、 pageY 、 target获得触发事件的元素 ( 冒泡的起始,和this不一样) which如果是鼠标事件获得按键(1左键,2中键,3右键)。
altKey 、 shiftKey 、 ctrlKey 获得 alt 、shift、ctrl 是否按下,为bool值。 keyCode 、 charCode 属性发生事件时的keyCode (键盘码,小
(2、移除事件绑定: bind() 方法即可移除元素上所有绑定的事件,如果 unbind("click") 则只移除 click 事件的绑定。 bind:+= ; unbind:-=
(3、一次性事件:如果绑定的事件只想执行一次随后立即 unbind 可以使用 one() 方法进行事件绑定:
$(":button").one("click", function() { alert("点了"); });
23、鼠标
$(document).mousemove(function(e) {
document.title = e.pageX + "," + e.pageY;
});
(2、在 mousemove 、 click 等事件的匿名响应函数中如果指定一个参数 e ,那么就可以从 e 读取发生事件时的一些信息,比如对mousemove 等鼠标事件 来
案例1:跟着鼠标飞
案例2:点击小图显示详情
24、动画及QQ风格控件
$(":button[value=show]").click(function() { $("div").show(); });
$(":button[value=hide]").click(function() { $("div").hide(); });
(2、 如果 show 、 hide 方法不带参数则是立即显示、立即隐藏,如果指定速度参数则会用指定时间进行动态显示、隐藏,单位为毫秒 ,也可以使用三个内置的速
25、JQuery Cookie 使用
(1、使用方法, Cookie 保存的是键值对
*1 、添加对 jquery.cookie.js
*2 、设置值, $.cookie(' 名字 ', ' 值 ') 。 cookie 中保存的值都是文本。
*3 、读取值, var v=$.cookie(' 名字 ')
alert($.cookie(" 用户名 "));
$.cookie(" 用户名 ","tom"); 在同域名的另外一个页面中也能读取到。
(2、设置值的时候还可以指定第三个参数, $.cookie(' 名字 ', ' 值 ', { expires: 7, path: '/',domain: 'itcast.cn', secure: true }) ,
expires 表示要求浏览器保留 Cookie 几天,这个值只是给浏览器的建议,可能没到时间就已经被清除了。可以实现 " 勾选 【 记录我的用户
名 10 天 】 " 的功能。如果不设定 expires 在浏览器关闭以后就清除, options 参数用哪个设置哪个
26、JQueryUI
下载地址:http://jqueryui.com/下发包
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- sed学习总结及实例
- 切分窗口学习总结及实例
- JQuery Ajax实例总结
- JQuery总结+实例
- JQuery实例总结一
- jQuery学习第九课(ajax实例、jquery插件编写模板及实例)
- 一个简单的jQuery插件制作 学习过程及实例
- JS学习实例:JavaScript时钟及Date对象学习总结
- jQuery菜鸟学习实例
- jquery插件及大量实例
- epoll学习及实例
- jquery学习总结
- Java项目在jsp页面中引入jquery框架的步骤
- easyui datebox 默认当天日期
- PowerDesigner之PDM(物理概念模型)
- Win7的任务计划怎么是后台运行的,怎么设置能让任务前台运行?
- 如何给DateTime类型赋空值
- JQuery 学习总结及实例
- 面试相关
- android Activity launchMode
- windows平台如何安装Python和pip
- weblogic12.1.3的安装
- poi 导出excel
- 创建下拉(Pull-Down)菜单
- OpenGL学习常用网站
- shiro+springmvc+mybatis(2)