Home >Web Front-end >JS Tutorial >Basic methods of jQuery value acquisition and assignment_jquery

Basic methods of jQuery value acquisition and assignment_jquery

WBOY
WBOYOriginal
2016-05-16 16:54:001101browse

/*Get the value of TEXT.AREATEXT*/
var textval = $("#text_id").attr("value");
//or
var textval = $("#text_id") .val();
/*Get the value of the radio button*/
var valradio = $("input[@type=radio][@checked]").val();
/* Get the value of a group of radio selected items named (items)*/
var item = $('input[@name=items][@checked]').val();
/*Get Checkbox value*/
var checkboxval = $("#checkbox_id").attr("value");
/*Get the value of the drop-down list*/
var selectval = $('# select_id').val();

//Text box, text area:
$("#text_id").attr("value",'');//Clear the content
$("#text_id").attr("value",'test');//Fill content
//Multiple selection box checkbox:
$("#chk_id").attr("checked", '');//Make it unchecked
$("#chk_id").attr("checked",true);//Checked
if($("#chk_id").attr( 'checked')==true) //Determine whether it has been selected

//Single selection group radio:

$("input[@type=radio]").attr("checked ",'2');//Set the item with value=2 as the currently selected item

//Drop-down box select:
$("#select_id").attr("value",'test ');//The item that sets value=test is the currently selected item
$("").appendTo("#select_id")//Add a drop-down box option
$("#select_id").empty();//Clear the drop-down box

Get the value of a set of radio selected items named (items)
var item = $ ('input[@name=items][@checked]').val();//If not selected, val() = undefined
Get the text of the selected item
var item = $( "select[@name=items] option[@selected]").text();
The second element of the select drop-down box is the currently selected value
$('#select_id')[0].selectedIndex = 1;
The second element of the radio radio group is the currently selected value
$('input[@name=items]').get(1).checked = true;

//Reset form
$("form").each(function(){
.reset();
});

1. Select element
$( "#myid") has the same effect as document.getElementById("myid"), but the characters written are much less.

If you need to convert the jQuery object into an html element, you only need to take the 0th element That’s it. For example, $(”#myid”) returns a jQuery object, and $(”#myid”)[0] returns the html element

. If you select all img elements, then write like this: $("img")

If you select a div element with class="TextBox" (

), then write like this: $("div.TextBox")

Select the element with the myattr attribute $("div[myattr]")
Select the element with the myattr attribute, and the attribute value is equal to myclass The element $("div[myattr='myclass']")
The attribute is not equal to [myattr!='myclass']
The attribute starts with my [myattr^='my']
The attribute starts with class Ending [myattr$='class']
The attribute contains the three characters cla [myattr*='cla']

If a selection will return multiple elements, and you want to return each element, then To apply certain attributes to the element, you can write
$("div").each(function()
{
$(this).css("background-color", "# F00″);
alert($(this).html());
$(this).width(”200px”);
});

2. Event
Add onload event handling method to the page
$(function()
{
alert("The page structure is loaded, but some pictures may not be loaded yet (generally, this event is enough) )");
});

You can bind multiple onload event handling methods to the page
$(function()
{
alert("I was executed first" );
});

$(function()
{
alert("I was executed second");
});

Tie Define special events
$("#myid").keydown(function()
{
alert("keydown event triggered");
});

In addition to these Commonly used and uncommon events need to be bound through the bind method

3. Element attributes/methods
get the height of an element, $(”#myid”).height()
get an The position of the element, $("#myid").offset() returns an offset object. If you take the top of the element position, then $("#myid").offset().top, if you take the left, then $( "#myid").offset().left
Get the innerHTML of an element, $("#myid").html()
Get the innerText of an element, $("#myid").text( )
Get the value of a text box, $("#myid").val()
Get the attribute of an element, $("#myid").attr("myattribute")

The above methods have a basic feature, that is, no parameters are used to represent the value, and parameters are used to represent the setting value (except offset), such as
$(”#myid”).height(”20″);
$("#myid").html("asdasd")
$("#myid").val("asdasd")

Note that offset is only Read.

Set an attribute $("#myid").attr("width", "20%")
Read an attribute $("#myid").attr( "width")
Specify multiple attributes at once $("#myid").attr({disabled: “disabled”, width: “20%”, height: “30″})
Delete attributes $( "#myid").removeAttr("disabled")

Apply style$("#myid").addClass("myclass")
Remove style$("#myid").removeClass(" myclass”)

Add a style $(”#myid”).css(”height”, “20px”)
Add a set of styles $(”#myid”).css({height: "20px", width:"100px"})
It should be noted that if you add a style, the name of this style is the name in css, for example, style=”background-color:#FF0000″, corresponding The jQuery writing method is $("#myid").css("background-color", "#FF0000")
But when adding a set of styles, the name of the style is the css name in JavaScript, for example: myid. style.backgroundColor = “#FF0000″, the corresponding jQuery writing is $(”#myid”).css({backgroundColor:”#FF0000″})

4. Find elements according to the relationship
Find the sum The next element of its own level $("#myid").next()
Find all the elements of its own level that are below itself $("#myid").nextAll()
Find the sum The previous element of its own level $("#myid").prev()
Find all the elements of its own level that are above itself $("#myid").prevAll()
Find Your own first-generation child element $("#myid").children()
Find your first parent element $("#myid").parent()
Find all your own parent elements$ ("#myid").parents()
Example:
$("div.l4").parents().each(
function() {
alert($(this). html());
});

will get all the parent elements of the div with class=l4, and alert their html

Example:
$( ”div.l4″).parents(”div.l2″).each(function() { alert($(this).html()); });
will get the parent element of class=l4, which The parent element must be a div, and its class=l2

All the methods mentioned here can have expressions. For the writing method of expressions, please refer to Part 1

5. Maintain the element
in Add an element to body
$("body").append("")
This statement will insert this html before the end tag of body, the result is
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn