< 笔记 > JQuery
来源:互联网 发布:如何进行店铺数据分析 编辑:程序博客网 时间:2024/06/11 05:21
01 JQuery
By Kevin Song
- 01-01 Hello JQuery/常见方法/CSS
- 01-02 选择器/筛选器
- 01-03 属性
- 01-04 效果
- 01-05 事件
- 01-06 AJAX
- 01-07 数组操作/字符串操作
- 01-08 JSON
- 01-09 对象转换
01-01 Hello JQuery
按b1按钮隐藏div
按b2按钮显示div
<script src="/jquery.min.js"></script><script> $(function(){ $("#b1").click(function(){ $("#d").hide(); }); $("#b2").click(function(){ $("#d").show(); }); });</script><button id="b1">隐藏div</button><button id="b2">显示div</button><div id="d">这是一个div</div>
文档加载
为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
换句话说,写在这里面的JQuery代码都是文档加载好之后的。
$(function(){ //code});
由两部分组成
$();
function(){ //code}
常见方法
关键字
- val
- html
- text
val()方法
获取标签value,相当于document.getElementById(“input1”).value;
<script src="jquery.min.js"></script><script> $(function(){ $("#b1").click(function(){ alert($("#input1").val()); }); });</script><button id="b1">取值</button><input type="text" id="input1" value="默认值">
html()方法
获取元素内容,保留内含的标签
<script src="jquery.min.js"></script><script> $(function(){ $("#b1").click(function(){ alert($("#d1").html()); }); });</script><button id="b1">获取文本内容</button><div id="d1"> 这是div的内容 <span>这是div里的span</span></div>
text()方法
获取元素内容,不保留内含的标签
<script src="jquery.min.js"></script><script> $(function(){ $("#b1").click(function(){ alert($("#d1").text()); }); });</script><button id="b1">获取文本内容</button><div id="d1"> 这是div的内容 <span>这是div里的span</span></div>
CSS
常用方法
- addClass():给指定元素增加一个样式中的class
- removeClass():给指定元素删除一个样式中的class
- toggleClass():给指定元素切换一个样式中的class
- 如果存在就删除
- 如果不存在,就添加
- css():直接设置样式
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ $("#b1").click(function(){ $("#d").addClass("pink"); }); $("#b2").click(function(){ $("#d").removeClass("pink"); }); $("#b3").click(function(){ $("#d").toggleClass("pink"); }); });</script><button id="b1">增加背景色</button><button id="b2">删除背景色</button><button id="b3">改变背景色</button><style>.pink{ background-color:pink;}</style><div id="d"> Hello JQuery</div>
css()方法
直接设置样式:
- css(property,value)
第一个参数是样式属性,第二个参数是样式值
- css({property1:value1,property2:value2})
格式
- 参数是 {} 包含的属性值对
- 属性值对之间用 逗号,分割
- 属性值之间用 冒号:分割
- 属性和值都需要用引号 “”
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("#b1").click(function(){ $("#d1").css("background-color","pink"); }); $("#b2").click(function(){ $("#d2").css({"background-color":"pink","color":"green"}); });});</script><button id="b1">设置单一样式</button><button id="b2">设置多种样式</button><div id="d1" > 单一样式,只设置背景色</div><div id="d2" > 多种样式,不仅设置背景色,还设置字体颜色</div>
01-02 选择器/筛选器
选择器
- 元素选择器
- $(“tagName”)
- id选择器
- $(“#id”)
- 类选择器
- $(“.className”)
- 层级
- $(“selector1 selector2”)
- 最先最后::first :last
- 奇偶::odd :even
- 可见性::hidden :visible
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ //元素选择器 $("#b1").click(function(){ $("div").toggleClass("pink"); }); //ID选择器 $("#b2").click(function(){ $("#d1").toggleClass("pink"); }); //类选择器 $("#b3").click(function(){ $(".d").toggleClass("pink"); }); //组合选择器 $("#b4").click(function(){ $("div#d3 span").toggleClass("pink"); }); //最先最后 $("#b5").click(function(){ //$("div:last").toggleClass("pink"); $("div:first").toggleClass("pink"); });});</script><button id="b1">给所有的div元素增加背景色</button><button id="b2">给id=d1的div增加背景色</button><button id="b3">给class=d的div增加背景色</button><button id="b4">给id=d3的span增加背景色</button><button id="b5">给第一个div增加背景色</button><style> .pink{ background-color:pink; }</style><div id="d1" class="d">Hello JQuery</div><div id="d2" class="d">Hello JQuery</div><div id="d3" class="d">Hello JQuery<span>HiHiHi</span></div>
- 属性:
- $(selector[attribute])满足选择器条件的有某属性的元素
- $(selector[attribute=’value’])满足选择器条件的属性等于value的元素
- $(selector[attribute!=’value’])满足选择器条件的属性不等于value的元素
- $(selector[attribute^=’value’])满足选择器条件的属性以value开头的元素
(selector[attribute =’value’])满足选择器条件的属性以value结尾的元素- $(selector[attribute*=’value’])满足选择器条件的属性包含value的元素
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("#b1").click(function(){ $("div[id]").toggleClass("border"); }); $("#b2").click(function(){ $("div[id='pink']").toggleClass("border"); }); $("#b3").click(function(){ $("div[id!='pink']").toggleClass("border"); }); $("#b4").click(function(){ $("div[id^='p']").toggleClass("border"); }); $("#b5").click(function(){ $("div[id$='k']").toggleClass("border"); }); $("#b6").click(function(){ $("div[id*='ee']").toggleClass("border"); });});</script><button id="b1">给有id属性的div切换边框</button><button id="b2">给id=pink的div切换边框</button><button id="b3">给有id!=pink属性的div切换边框</button><button id="b4">给有id以p开头的div切换边框</button><button id="b5">给有id以k结尾的div切换边框</button><button id="b6">给有id包含ee的div切换边框</button><style> .pink{ background-color:pink; } .green{ background-color:green; } .border{ border: 1px blue solid; } button{ margin-top:10px; display:block; } div{ margin:10px; }</style><div id="pink"> id=pink的div</div><div id="green"> id=green的div</div><div > 没有id的div</div>
- 表单对象:
- :input:会选择所有的输入元素,不仅仅是input标签开始的那些,还包括textarea,select和button
- :button:会选择type=button的input元素和button元素
- :radio:会选择单选框
- :checkbox:会选择复选框
- :text:会选择文本框,但是不会选择文本域
- :button
- :file
- :submit:会选择提交按钮
- :image:会选择图片型提交按钮
- :reset:会选择重置按钮
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); }); </script><style>table{ border-collapse:collapse; table-layout:fixed; width:80%;}table td{ border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px;}div button{ display:block;}</style><table> <tr> <td rowspan="13" valign="top" width="150px"> <div > <button value=":input" class="b">切换所有的:input</button> <button value=":button" class="b">切换:button</button> <button value=":radio" class="b">切换:radio</button> <button value=":checkbox" class="b">切换:checkbox</button> <button value=":text" class="b">切换:text</button> <button value=":password" class="b">切换:password</button> <button value=":file" class="b">切换:file</button> <button value=":submit" class="b">切换:submit</button> <button value=":image" class="b">切换:image</button> <button value=":reset" class="b">切换:reset</button> </div> </td> <td width="120px">说明</td> <td width="120px">表单对象</td> <td width="">示例</td> </tr><tr><td>input按钮</td><td >:button</td><td><input type="button" value="input按钮"/></td></tr><tr><td>button按钮</td><td >:button</td><td><button>Button按钮</button></td></tr><tr><td>单选框</td><td >:radio</td><td><input type="radio" ></td></tr><tr><td>复选框</td><td >:checkbox</td><td><input type="checkbox" ></td></tr><tr><td>文本框</td><td >:text</td><td><input type="text" /></td></tr><tr><td>文本域</td><td ></td><td><textarea></textarea></td></tr><tr><td>密码框</td><td >:password</td><td><input type="password" /></td></tr><tr><td>下拉框</td><td ></td><td><select><option>Option</option></select></td></tr><tr><td>文件上传</td><td >:file</td><td> <input type="file" /></td></tr><tr><td>提交按钮</td><td >:submit</td><td><input type="submit" /></td></tr><tr><td>图片型提交按钮</td><td >:image</td><td><input type="image" src="http://how2j.cn/example.gif" /></td></tr><tr><td>重置按钮</td><td >:reset</td><td><input type="reset" /></td></tr></table>
- 表单对象属性::enabled :disabled :checked :selected
- 当前元素:this
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ $("#b1").click(function(){ $(this).hide(); }); });</script><button id="b1">点击隐藏</button>
筛选器
筛选器指的是在已经通过选择器选中了元素后,在此基础上进一步选择。
- first()第一个
- last()最后一个
- eq(num)第num个
- parent()父元素
- parents()父元素们
- children()子元素
- find()后代
- siblings()同级元素
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("#b1").click(function(){ $("div").first().toggleClass("pink"); }); $("#b2").click(function(){ $("div").last().toggleClass("pink"); }); $("#b3").click(function(){ $("div").eq(2).toggleClass("pink"); });});</script><button id="b1">切换第1个div背景色</button><button id="b2">切换最后1个div背景色</button> <button id="b3">切换第2个div背景色</button><style> .pink{ background-color:pink; }</style><div> <span>Hello JQuery 1</span></div><div > <span>Hello JQuery 2</span></div><div > <span>Hello JQuery 3</span></div>
01-03 属性
通过以下方法直接修改元素属性
- attr:获取
- attr(属性,值):修改
- removeAttr:修改
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("#b1").click(function(){ alert("align属性是:" + $("#h").attr("align") ); }); $("#b2").click(function(){ alert("game属性是:" + $("#h").attr("game") ); }); $("#b3").click(function(){ $("#h").attr("align","right"); }); $("#b4").click(function(){ $("#h").removeAttr("align"); });});</script><button id="b1">获取align属性</button><button id="b2">获取自定义属性 game</button><button id="b3">修改align属性为right</button><button id="b4">删除align属性</button><h1 id="h" align="center" game="LOL">居中标题</h1>
prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性。
区别在于,对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
- 对于自定义属性 attr能够获取,prop不能获取
- 对于选中属性
attr 只能获取初始值, 无论是否变化
prop 能够访问变化后的值,并且以true|false的布尔型返回。
所以在访问表单对象属性的时候,应该采用prop而非attr
01-04 效果
- 显示隐藏切换
- show()显示
- hide()隐藏
- toggle()切换
- 滑动
- slideUp()向上滑动
- slideDown()向下滑动
- slideToggle()华东切换
- 淡入淡出
- fadeIn()淡入
- fadeOut()淡出
- fadeToggle()淡入淡出切换
- fadeTo()制定淡入程度
- 动画
- animate()自定义动画效果
- 回调函数
- callback()
显示隐藏切换滑动演示
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){var div = $("#d"); $("#b1").click(function(){ div.hide(); }); $("#b2").click(function(){ div.show(); }); $("#b3").click(function(){ div.toggle(); }); $("#b4").click(function(){ div.show(1000); }); $("#b5").click(function(){ div.hide(1000); }); $("#b6").click(function(){ div.toggle(1000); }); $("#b7").click(function(){ div.slideUp(); }); $("#b8").click(function(){ div.slideDown(); }); $("#b9").click(function(){ div.slideToggle(); }); $("#b10").click(function(){ div.slideUp(2000); }); $("#b11").click(function(){ div.slideDown(2000); }); $("#b12").click(function(){ div.slideToggle(2000); });});</script><style> button{ display:block; } div{ border:solid 1px gray; background-color:pink; width:300px; height:100px; }</style><button id="b1">立即隐藏</button> <button id="b2">立即显示</button><button id="b3">立即切换</button><button id="b4">延时显示</button><button id="b5">延时隐藏</button><button id="b6">延时切换</button><button id="b7">向上滑动</button><button id="b8">向下滑动</button><button id="b9">滑动切换</button><button id="b10">延时向上滑动</button><button id="b11">延时向下滑动</button><button id="b12">延时滑动切换</button><div id="d">用于演示效果的DIV</div>
淡入淡出演示
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.fadeIn(); }); $("#b2").click(function(){ div.fadeOut(); }); $("#b3").click(function(){ div.fadeToggle(); }); $("#b4").click(function(){ div.fadeIn(2000); }); $("#b5").click(function(){ div.fadeOut(2000); }); $("#b6").click(function(){ div.fadeToggle(2000); }); $("#b7").click(function(){ $("#d1").fadeTo("slow",0.2); $("#d2").fadeTo("slow",0.5); $("#d3").fadeTo("slow",0.8); }); });</script><style>button{ display:block;}table div{ border:solid px gray; background-color:pink; width:80px; height:50px;}div{ border:solid 1px gray; background-color:pink; width:300px; height:100px;}</style><button id="b2">淡出</button> <button id="b1">淡入</button><button id="b3">淡入淡出切换</button><button id="b5">延时淡出</button> <button id="b4">延时淡入</button><button id="b6">延时滑淡入淡出切换</button><button id="b7">fadeTo</button><br><br><div id="d">用于演示效果的DIV</div><table><tr><td><div id="d1">用于演示fadeTo 20%</div></td><td><div id="d2">用于演示fadeTo 50%</div></td><td><div id="d3">用于演示fadeTo 80%</div></td></tr></table>
animate()方法
通过animate 可以实现更为丰富的动画效果
- animate()第一个参数为css样式
- animate()第二个参数为延时毫秒
注: 默认情况下,html中的元素都是固定,并且无法改变的位置的。 为了使用animate()自定义动画效果,需要通过css把元素的position设置为relative、absolute或者fixed。
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000); });});</script><style> button{ display:block; } div{ background-color:pink; width:200px; height:80px; font-size:12px; position:relative; }</style><button id="b1">自定义动画</button><div id="d"><p>1. 向右移动100px</p><p>2. 向左下移动50px,同时高度变小</p></div>
- 效果一般需要一定的时间,并且这个时间可长可短,所以就无法精确的确定该效果合适结束。
- 好在,效果方法都提供对回调函数callback()的支持。
- 只需要在调用效果方法的最后一个参数传入一个function,当效果结束的时候,就会自动调用该function了。
<script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){ alert("动画演示结束"); }); }); });</script>
01-05 事件
- 加载
- $(document).ready()
- $()
- load()
- 点击
- click()
- dblclick()
- 键盘
- keydown()
- keypress()
- keyup()
- 鼠标
- mousedown()
- mouseup()
- mousemove()
- mouseenter()
- mouseleave()
- mouseover()
- mouseout()
- 焦点
- focus()
- blur()
- 改变
- change()
- 提交
- submit()
- 绑定事件
- on()
- 触发事件
- trigger()
加载
页面加载有两种方式表示
- $(document).ready();
- $(); 这种比较常用
图片加载用load()函数
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(document).ready(function(){ $("#message1").html("页面加载成功"); }); $(function(){ $("#img").load(function(){ $("#message2").html("图片加载成功"); }); });</script><div id="message1"></div><div id="message2"></div><img id="img" src="http://how2j.cn/example.gif">
点击
- click() 表示单击
- dblclick() 表示双击
注: 空白键和回车键也可以造成click事件,但是只有双击鼠标才能造成dblclick事件
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ $("#b").click(function(){ $("#message").html("单击按钮"); }); $("#b").dblclick(function(){ $("#message").html("双击按钮"); }); });</script><div id="message"></div><button id="b">测试单击和双击</button>
键盘
- keydown 表示按下键盘
- keypress 表示按下键盘
- keyup 表示键盘弹起
这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面
先后顺序: 按照 keydown keypress keyup 顺序发生
键盘按钮值:
- 通过event对象的which属性获取键盘的值
- keydown和keyup 能获取所有按键,不能识别大小写
- keypress 不能获取功能键,如F1 SHIFT等,能够识别大小写
文本取值:
- keydown和keypress:不能获取最后一个字符
- keyup: 获取所有字符
例,敲入ab
发生的先收顺序是 keydown,keypress,keyup
keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
keydown和keypress只能取到文本值a, keyup可以取到ab
鼠标
- mousedown 表示鼠标按下
- mouseup表示鼠标弹起
~
- mousemove表示鼠标进入
- mouseenter表示鼠标进入
- mouseover表示鼠标进入
~
- mouseleave表示鼠标离开
- mouseout表示鼠标离开
进入事件有3个 mousemove mouseenter mouseover
- mousemove :当鼠标进入元素,每移动一下都会被调用
- mouseenter :当鼠标进入元素,调用一下,在其中移动,不调用
- mouseover:当鼠标进入元素,调用一下,在其中移动,不调用
mouseenter 和 mouseover的区别
- mouseenter: 当鼠标经过其子元素不会被调用
- mouseover:当鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
- mouseleave: 当鼠标经过其子元素不会被调用
- mouseout:当鼠标经过其子元素会被调用
焦点
- focus() 获取焦点
- blur() 失去焦点
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("input").focus(function(){ $(this).val("获取了焦点"); }); $("input").blur(function(){ $(this).val("失去了焦点"); });});</script><style></style><input type="text" ><input type="text" >
改变
change() 内容改变
注: 对于文本框,只有当该文本失去焦点的时候,才会触发change事件。
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ $("#input1").change(function(){ var text = $(this).val(); $("#message").html("input1的内容变为了"+text); }); });</script><style></style><div id="message"></div><input id="input1" type="text" ><input size="50" id="input2"type="text" value="只有当input1失去焦点的时候,才会触发change事件" >
提交
submit() 提交form表单
<script src="http://how2j.cn/study/jquery.min.js"></script><form id="form" action="http://how2j.cn/study/login.jsp">账号 : <input name="name" type=""> <br>密码: <input name="password" type=""><br><input type="submit" value="登陆"></form><script> $(function(){ $("#form").submit(function(){ alert("提交账号密码"); }); });</script>
绑定事件
以上所有的事件处理,都可以通过on() 绑定事件来处理
$("selector").on("event",function);
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); //对比不绑定 $("#b").click(function(){ $("#message").html("单击按钮"); }); $("#b").dblclick(function(){ $("#message").html("双击按钮"); }); });</script><div id="message"></div><button id="b">测试单击和双击</button>
触发事件
触发事件,在本例中,文档加载好之后,就触发dblclick双击事件,而不是通过去手动双击。
$("selector").trigger("event");
<script src="http://how2j.cn/study/jquery.min.js"></script><script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); $("#b").trigger("dblclick"); });</script><div id="message"></div><button id="b">测试单击和双击</button>
01-06 AJAX
JQuery也有对AJAX的支持,使得其对AJAX的操作简化了很多。
- $.ajax() 提交AJAX请求
- $.get() 使用get方式提交ajax
- $.post() 使用post方式提交ajax
- load() 最简单的调用ajax的方式
- serialize()格式化form下的输入数据
提交AJAX请求
$.ajax采用参数集的方式 {param1,param2,param3}
不同的参数之间用,隔开
- 第一个参数 url:page 表示访问的是page页面
- 第二个参数 data:{name:value} 表示提交的参数
- 第三个参数 success: function(){}
表示服务器成功返回后对应的响应函数
$.ajax({ url: page, data:{"name":value}, success: function(result){ $("#checkResult").html(result); }});
<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"><script>$(function(){ $("#name").keyup(function(){ var page = "/study/checkName.jsp"; var value = $(this).val(); $.ajax({ url: page, data:{"name":value}, success: function(result){ $("#checkResult").html(result); } }); });});</script>
使用get方式提交ajax
$.get 使用3个参数
- 第一个参数: page 访问的页面
- 第二个参数: {name:value} 提交的数据
- 第三个参数: function(){} 响应函数
只有第一个参数是必须的,其他参数都是可选
<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"><script>$(function(){ $("#name").keyup(function(){ var page = "/study/checkName.jsp"; var value = $(this).val(); $.get( page, {"name":value}, function(result){ $("#checkResult").html(result); } ); });});</script>
使用post方式提交ajax
$.post 使用3个参数
- 第一个参数: page 访问的页面
- 第二个参数: {name:value} 提交的数据
- 第三个参数: function(){} 响应函数
只有第一个参数是必须的,其他参数都是可选
<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"> <script>$(function(){ $("#name").keyup(function(){ var page = "/study/checkName.jsp"; var value = $(this).val(); $.post( page, {"name":value}, function(result){ $("#checkResult").html(result); } ); });});</script>
最简单的调用ajax的方式
load比起
$("#id").load(page,[data]);
- id: 用于显示AJAX服务端文本的元素Id
- page: 服务端页面
- data: 提交的数据,可选。 在本例中,直接在page里加上了参数列表
<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div>输入账号 :<input id="name" type="text"> <script>$(function(){ $("#name").keyup(function(){ var value = $(this).val(); var page = "/study/checkName.jsp?name="+value; $("#checkResult").load(page); });});</script>
格式化form下的输入数据
serialize(): 格式化form下的输入数据
有的时候form下的输入内容比较多,一个一个的取比较麻烦,就可以使用serialize() 把输入数据格式化成字符串
<script src="http://how2j.cn/study/jquery.min.js"></script><div id="checkResult"></div><div id="data"></div><a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a><form id="form"> 输入账号 :<input id="name" type="text" name="name"> <br>输入年龄 :<input id="age" type="text" name="age"> <br>输入手机号码 :<input id="mobile" type="text" name="mobile"> <br></form><script>$(function(){ $("input").keyup(function(){ var data = $("#form").serialize(); var url = "http://how2j.cn/study/checkName.jsp"; var link = url+"?"+ data; $("a").html(link); $("a").attr("href",link); });});</script>
05-07 数组操作&字符串操作
- $.each() 遍历
- $.unique() 去除重复
- $.inArray() 是否存在
遍历
遍历一个数组
$.each()
- 第一个参数是数组
- 第二个参数是回调函数 i是下标,n是内容
<script src="http://how2j.cn/study/jquery.min.js"></script><script> var a = new Array(1,2,3); $.each( a, function(i, n){ document.write( "元素[" + i + "] : " + n + "<br>" ); }) document.close();</script>
去除重复
去掉重复的元素
$.unique()
注意:执行unique之前,要先调用sort对数组的内容进行排序。
<script src="http://how2j.cn/study/jquery.min.js"></script><script> var a = new Array(5,2,4,2,3,3,1,4,2,5); a.sort(); $.unique(a); $.each( a, function(i, n){ document.write( "元素[" + i + "] : " + n + "<br>" ); }) document.close();</script>
是否存在$.inArray
返回元素在数组中的位置 ,如果不存在返回-1
$.inArray
<script src="http://how2j.cn/study/jquery.min.js"></script><script> var a = new Array(1,2,3,4,5,6,7,8); document.write($.inArray(9,a)); document.close();</script>
字符串操作
- $.trim() 去除首尾空白
<script src="http://how2j.cn/study/jquery.min.js"></script><script> document.write($.trim(" Hello JQuery ")); document.close();</script>
01-08 JSON
$.parseJSON()
将JSON格式的字符串,转换为JSON对象
<script src="http://how2j.cn/study/jquery.min.js"></script><script> var s1 = "{\"name\":\"盖伦\""; var s2 = ",\"hp\":616}"; var s3 = s1+s2; document.write("这是一个JSON格式的字符串:" + s3); document.write("<br>"); var gareen = $.parseJSON(s3); document.write("这是一个JSON对象: " + gareen);</script>
01-09 对象转换
JQuery对象和DOM节点对象进行互相转换
- DOM对象不具备比如show() 、toggle()等等方法。
- 同样的DOM对象也具备JQuery对象所没有的属性和方法,比如checked属性。
在某些场景下,需要对JQuery对象和DOM节点对象进行互相转换
- get(0)/[0] JQuery转DOM
- $() DOM转JQuery
JQuery转DOM
通过get(0)或者[0] 把JQuery对象转为DOM对象
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("#b1").click(function(){ var div= $("#d"); var d = div[0]; var s ="JQuery对象是 " + div; s +="\n对应的DOM对象是 " + d alert(s); });});</script><button id="b1">JQuery对象div转为DOM对象d</button><style> .pink{ background-color:pink; }</style><div id="d">Hello JQuery</div>
DOM转JQuery
通过$()把DOM对象转为JQuery对象
<script src="http://how2j.cn/study/jquery.min.js"></script><script>$(function(){ $("#b1").click(function(){ var div= document.getElementById("d"); var d = $(div); var s ="DOM对象是 " + div; s +="\n对应的JQuery对象是 " + d alert(s); });});</script><button id="b1">DOM对象div转为JQuery对象d</button><style> .pink{ background-color:pink; }</style><div id="d">Hello JQuery</div>
- JQuery 笔记:
- jquery笔记
- jquery笔记
- JQuery 笔记
- JQuery笔记
- JQuery笔记
- JQuery笔记
- jquery 笔记
- jquery 笔记
- jquery笔记
- jquery+笔记
- JQuery笔记
- jquery笔记
- jquery笔记
- JQuery 笔记
- Jquery 笔记
- jQuery笔记
- JQuery笔记
- 第五周 项目二 链栈算法库的建立
- selenium中怎么使用autoit
- entrySet和keySet的小小区别
- hihoCoder#1152 (set及substr的使用)
- 文章标题
- < 笔记 > JQuery
- 对于流媒体的一些认识
- 第七周项目2-建立链队算法库
- (09)oracle新人笔记------视图
- 【web html】html 知识点
- 18 索引扫描成本计算--优化主题系列
- C# 枚举
- sql递归查找父节点的例子
- 编码规范-Google-Java