当前位置：Gxlcms > JavaScript > jQueryStudyNotes学习笔记(二)_jquery

jQueryStudyNotes学习笔记(二)_jquery

时间：2021-07-01 10:21:17 帮助过：6人阅读

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

代码:

代码如下:

 // 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);

4.Checkbox选择/取消

代码如下:

 
// Check #x 
$("#c").attr("checked", "checked"); 
// Uncheck #x 
$("#c").removeAttr("checked"); 

代码:

代码如下:

I'll be checked/unchecked.

5.获取Select Opion的value和text

代码如下:

 
$("select#myselect").val(); 
$("#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); 

jQueryStudyNotes学习笔记(二)_jquery

人气教程排行