jQuery Study Notes学习笔记 (二)_Javascript教程-查字典教程网
jQuery Study Notes学习笔记 (二)
jQuery Study Notes学习笔记 (二)
发布时间:2016-12-30 来源:查字典编辑
摘要:1.使用class与id选择HTML元素选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素复制代码代码如下:...

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">

<option>one</option>

<option>two</option>

</select>

<input type="button" value="Disable"/>

<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"/>

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> <option value="1">Mr</option><BR> <option value="2">Mrs</option><BR> <option value="3">Ms</option><BR> <option value="4">Dr</option><BR> <option value="5">Prof</option><BR></select><BR><input type="button" value="Get Value"/><BR><input type="button" value="Get Text Value"/>

替换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);

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类