JQuery value the basic method of assignment

  • 2020-03-30 02:28:27
  • OfStack


Var textval = $(" # text_id "). Attr (" value ");
/ / or
Var textval = $(" # text_id "). Val ();

Var valradio = $(" input [@ type = radio] [@ checked] "). The val ();

Var item = $(' input [@ name = items] [@ checked] '). The val ();

Var checkboxval = $("#checkbox_id").attr("value");

Var selectval = $(' # select_id). Val ();

// text box, text area:
$(" # text_id "). Attr (" value ", "); // empty the content
$(" # text_id "). Attr (" value ", "test"); // fill in the content
// checkbox:
$(" # chk_id "). Attr (" checked ", "); // uncheck it
$(" # chk_id "). Attr (" checked ", true); / / check
If ($("#chk_id").attr('checked')==true) //

// radio group:

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

// drop-down select:
$(" # select_id "). Attr (" value ", "test"); // the item that sets value=test is the currently selected item
$(" < The option value = 'test' > Test< / option> < The option value = 'test2' > Test2 < / option>" ).appendto ("#select_id")// add options to the drop-down box
$(" # select_id "). The empty (); // empty the drop-down box

Gets the values of a set of selected items of the radio named (items)
Var item = $(' input [@ name = items] [@ checked] '). The val (); // val() = undefined if not selected
Gets the text of the selected item in a select
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] '). The get (1) checked = true;

// reset the form
$(" form "). Each (function () {
The reset ();
});

1. Select the element
The $(" #myid ") effect is equal to document.getelementbyid (" myid "), but with far fewer characters.

If you need to convert a jQuery object into an HTML element, you only need to take the 0th element. For example, $(" #myid ") returns a jQuery object, while $(" #myid "[0] returns an HTML element

If you select all img elements, write: $(" img ")

If you select the div element with class= "TextBox" (< Div class = "TextBox" > < / div>) , so write: $(" div.textbox ")

Select the element $(" div[myattr] "with the myattr attribute
Select the element $(" div[myattr='myclass'] "with the myattr attribute and its value equal to myclass.
Property is not equal to [myattr!='myclass']
Property begins with my [myattr^='my']
Property ends in class [myattr$='class']
Property contains the cla three characters [myattr*='cla']

If a selection returns more than one element and you want to apply certain attributes to that element for each element returned, write this
$(" div ".) each (function ()
{
Background - $(this). The CSS (" color ", "# F00");
Alert ($(this). The HTML ());
$(this). The width (" 200 px ");
});

2. The event
Add an onload event handler to the page
$(function ()
{
Alert (" page structure is loaded, but some images may not be loaded (this event is usually sufficient) ");
});

You can bind multiple onload event handling methods to a page
$(function ()
{
Alert (" I am executed first ");
});

$(function ()
{
Alert (" I am executed second ");
});

Bind special events
$(" # myid "). The keydown (function ()
{
Alert (" keydown event ");
});

In addition to these commonly used and infrequently used events, you need to bind them using the bind method

3. Element attributes/methods
Get the height of an element, $(" #myid ").height()
Offset () returns an offset object. If you take the top of the element position, then $(" #myid ").offset().top? Take left is $(" # myid "). The offset () left
We get the innerHTML of an element, $(" #myid ").html()
You get the innerText of an element, $(" #myid ").text()
$(" #myid ").val()
Get an attribute of an element, $(" #myid ").attr(" myattribute ")

One of the basic characteristics of the above methods is that they represent the value without parameters and the set value (except offset) with parameters, for example
$(" # myid "). The height (" 20 ");
$(" # myid "). The HTML (" < A href = "> Asdasd< / a>" )
$(" # myid "). Val (" asdasd ")

Note that offset is read-only.

$(" #myid ").attr(" width ", "20%")
$(" #myid ").attr(" width ")
A specify multiple attribute $(" # myid "). The attr ({disabled: "disabled", width: "20%", height: "30"})
Remove attribute $(" #myid "). RemoveAttr (" disabled ")

Apply style $(" #myid ").addclass (" myclass ")
Remove style $(" #myid "). RemoveClass (" myclass ")

Add a style $(" #myid ").css(" height ", "20px")
Add a set of style $(" # myid "). The CSS ({20 px height: "", width:" 100 px "})
It is important to note that if you add a style, the name of the style is in CSS, such as style= "backback-color :#FF0000", the corresponding jQuery style is $(" #myid "). CSS (" backback-color ", "#FF0000")
But add a set of style, the style name is CSS in the javascript name, such as: myid. Style. The backgroundColor = "# FF0000", corresponding to the jQuery writing is $(" # myid "). The CSS (# {backgroundColor: "FF0000"})

Find elements by relationship
Find the next element in your sibling, $(" #myid "). Next ()
$(" #myid "). NextAll ()
$(" #myid "). Prev ()
PrevAll () $(" #myid "). PrevAll ()
Find your first child $(" #myid ").children()
Find your first parent $(" #myid ").parent()
Find all of your parent elements $(" #myid ").parents()
Example:
$(" div. L4). Parents (). Each (
The function () {
Alert ($(this). The HTML ());
});

You get all the parent elements of the class=l4 div, and alert out their HTML

Example:
$(" div. L4). Parents (div. "l2".) each (function () {alert ($(this). The HTML ()); });
You get the parent of class=l4, which must be div, and its class=l2

All of the methods I'm talking about here can be written with an expression, and the expression is written with reference to the first part

5. Maintain elements
Add an element to the body
$(" body "). Append (" < Input type = 'text' value = 'asd' / >" )
This statement inserts the HTML before the body closing tag, and the result is < Input type = 'text' value = 'asd' / > < / body>

$(" body "). The prepend (" < Input type = 'text' value = 'asd' / >" )
This statement inserts the HTML after the body start tag, and the result is < Body> < Input type = 'text' value = 'asd' / >

6. AJAX
Request a page using the get method
$.get (" http://www.google.com ", "q = jquery", function (data, status) {alert (data)})
After the end of the request (whether it succeeds or fails), execute the following function. This function has two fixed parameters, data and status. Data is the data returned, and status is the status of this request

Request a page using the post method
$.post (... ..) Parameter is the same as the get method

7. Other methods
Trim (STR) removes the Spaces before and after STR
$. Browser returns the type of the current user's browser
$.browser. Version returns the version of the current browser

8. The plugin
JQuery plugin support, http://jquery.com/plugins/ there are a lot of ready-made plug-in, can also write their own
Writing your own plugin, please refer to http://docs.jquery.com/Core/jQ... End# object and http://docs.jquery.com/Core/jQuery.extend#object

1. Drop-down box:
Var cc1 = $(".formc select[@name='country'] option[@selected]").text(); // gets the text of the selected item in the drop-down menu (note the space in the middle)
Var cc2 = $(' formc select [@ name = "country"] '). The val (); // gets the value of the selected item in the drop-down menu
Var cc3 = $(' formc select [@ name = "country"] '). The attr (" id "); // gets the ID attribute value of the selected item in the drop-down menu
$(" # select "). The empty (); // empty the drop-down box //$("#select").html(");
$(" < The option value = '1' > 1111 < / option>" ).appendto ("#select")// add options to the drop-down box
A little explanation:
Select [@name='country'] option[@selected]
And the option element with the selected attribute inside the select element of 'country';
You can see that the one that starts with an @ is followed by a property.

2. Menu:
$(" input [@ type = radio] [@ checked] "). The val (); // gets the value of the selected item in the marquee (note no space)
$(" input [@ type = radio] [@ value = 2] "). The attr (" checked ", "checked"); // set the menu value=2 as the selected state.

3. Check box:
$(" input [@ type = checkbox] [@ checked] "). The val (); // gets the value of the first item selected in the check box
$("input[@type=checkbox][@checked]"). Each (function()
Alert ($(this). Val ());
});

$(" # chk1 "). Attr (" checked ", "); / / no box
$(" # chk2). Attr (" checked ", true); / / box
If ($(" # chk1 "). The attr (" checked ") = = undefined) {} / / determine whether have tick

Related articles: