1. 使用class与id选择HTML元素
  选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素
复制代码 代码如下:
$('#myDivId')

选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素.
复制代码 代码如下:
$('.myCssClass')

获取或设置元素的值
复制代码 代码如下:
var myValue = $('#myDivId').val(); // get the value of an element
$('#myDivId').val("hello world"); // set the value of an element

选择id中有.和:时,前面添加两个反斜杠
复制代码 代码如下:
// Does not work
$("#some:id")
// Works!
$("#some\\:id")
// Does not work
$("#some.id")
// Works!
$("#some\\.id")

或者用如下处理
复制代码 代码如下:
function jq(myid) {
return '#' + myid.replace(/(:|\.)/g,'\\$1');
}
$( jq('some.id') )

2. 测试元素
  使用is()方法测试是否具有某个class
复制代码 代码如下:
if ( $('#myDiv').is('.pretty') )
$('#myDiv').show();

测试是否隐藏
复制代码 代码如下:
if ( $('#myDiv').is(':hidden') )
$('#myDiv').show();

1.2版本后,可以使用hasClass方法处理
复制代码 代码如下:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});

测试元素是否存在
复制代码 代码如下:
if ( $('#myDiv').length )
$('#myDiv').show();

3.元素禁用与允许
复制代码 代码如下:
// Disable #x
$("#x").attr("disabled","disabled");
// Enable #x
$("#x").removeAttr("disabled");

代码:
复制代码 代码如下:
<select id="x" style="width:200px;">
<option>one</option>
<option>two</option>
</select>
<input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>
<DIV class=cnblogs_Highlighter><PRE class=brush:html> // This doesn't work
$(this).find('li a').eq(2).text().replace('foo','bar');
// This works
var $thirdLink = $(this).find('li a').eq(2);
var linkText = $thirdLink.text().replace('foo','bar');
$thirdLink.text(linkText);
</PRE>
</DIV>
<input type="button" value="Enable" onclick="$('#x').removeAttr('disabled')"/>

4.Checkbox选择/取消
复制代码 代码如下:
// Check #x
$("#c").attr("checked", "checked");
// Uncheck #x
$("#c").removeAttr("checked");

代码:
复制代码 代码如下:
<label><input type="checkbox" id="c"/> I'll be checked/unchecked.</label><BR><input type="button" value="Check" onclick='$("#c").attr("checked","checked")'/><BR><input type="button" value="Uncheck" onclick='$("#c").removeAttr("checked")'/><BR>

5.获取Select Opion的value和text
复制代码 代码如下:
$("select#myselect").val();
$("#myselect option:selected").text();

代码:
复制代码 代码如下:
<select id="myselect"><BR>&nbsp;&nbsp; <option value="1">Mr</option><BR>&nbsp;&nbsp; <option value="2">Mrs</option><BR>&nbsp;&nbsp; <option value="3">Ms</option><BR>&nbsp;&nbsp; <option value="4">Dr</option><BR>&nbsp;&nbsp; <option value="5">Prof</option><BR></select><BR><input type="button" value="Get Value" onclick="alert($('#myselect').val())"/><BR><input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())"/>

替换10个项目中第3个项目的文本
复制代码 代码如下:
// This doesn't work
$(this).find('li a').eq(2).text().replace('foo','bar');
// This works
var $thirdLink = $(this).find('li a').eq(2);
var linkText = $thirdLink.text().replace('foo','bar');
$thirdLink.text(linkText);
标签:
jQuery,学习笔记

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“jQuery Study Notes学习笔记 (二)”

暂无“jQuery Study Notes学习笔记 (二)”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。