jQuery Study Notes study notes (2)_jquery

1. Use class and id to select HTML elements
Select the element with the id "myDivId". Since the id is unique, 1 or 0 elements

are always selected Copy code The code is as follows:

$('#myDivId')

Select class as "myCssClass". OK Select any multiple elements with class "myCssClass".

Copy code The code is as follows:

$('.myCssClass')

Get or set the value of the element

Copy code The code is as follows :

var myValue = $('#myDivId').val(); // get the value of an element
$('#myDivId').val("hello world" ); // set the value of an element

When selecting id with . and:, add two backslashes

Copy the code The code is as follows:

// Does not work
$("#some:id")
// Works!
$("#some\:id")
// Does not work
$("#some.id")
// Works!
$("#some\.id")

Or use the following processing

Copy the code The code is as follows:

function jq(myid) {
return '#' myid.replace(/(:|.)/g,'\$1');
}
$( jq('some.id') )

2. Test element
Use the is() method to test whether it has a certain class

Copy code The code is as follows:

if ( $('#myDiv').is('.pretty') )
$('#myDiv').show();

Test whether to hide

Copy code The code is as follows:

if ( $('#myDiv').is(':hidden') )
$('#myDiv').show();

After version 1.2, you can use the hasClass method to handle it

Copy code The code is as follows:

$("div").click(function() {
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});

Test whether the element exists

Copy code The code is as follows:

if ( $(' #myDiv').length )
$('#myDiv').show();

3. Element disabling and allowing

Copy code The code is as follows:

// Disable #x
$("#x").attr("disabled","disabled" );
// Enable #x
$("#x").removeAttr("disabled");

Code:

Copy code The code is as follows:

< option>one
two

 // This doesn't work <br>$(this ).find('li a').eq(2).text().replace('foo','bar'); <br>// This works <br>var $thirdLink = $(this).find ('li a').eq(2); <br>var linkText = $thirdLink.text().replace('foo','bar'); <br>$thirdLink.text(linkText); <br> 

4.Checkbox selection/cancel

Copy code The code is as follows:

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

Code:

Copy code The code is as follows:

< ;label> I'll be checked/unchecked.

5. Get the value and text of Select Opion

Copy Code The code is as follows:

$("select#myselect").val();
$("#myselect option:selected").text ();

Code:

Copy code The code is as follows:

Ms
Dr
Prof

Replace the text of the 3rd item among the 10 items

Copy the code The code is as follows:

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