Home >Web Front-end >JS Tutorial >Some basic operations of Jquery form value assignment_jquery
Selector with qualified child nodes: $("mix1[mix2]"): Returns the mix1 node containing mix2. For example: $("div[a]"): A div containing the a tag.
This is the same as $(" div a") are not the same. The latter represents the a tag in the div and returns the a tag object. The former returns the div tag object
Colon-qualified node selector: $("mix:condition"):mix tag, and meet the qualifying conditions.
E:root: The type is E, and it is the root element of the document
E:nth-child(n): It is the nth child element of type E of its parent element , the base starts from 1
E:first-child: is the first child element of type E of its parent element
E:last-child: is the last child element of type E of its parent element
E:only-child: and is the only child element of type E of its parent element
E:empty: an element of type E that has no child elements (including text nodes)
E:enabled
E:disabled: User interface elements of type E, allowed or prohibited
E:checked: User interface elements of type E, in selected state (such as radio buttons or check boxes)
E:visible: Select all visible elements (the display value is block or visible, the visibility value is visible elements, excluding the hide field)
E:hidden: Select all hidden elements (non-Hide field, and the display value is block or visible) , elements whose visibility value is visible)
E:not(s): type is E, does not match selector s
E:eq(n),E:gt(n),E:lt(n) :Element qualification
E:first: Equivalent to E:eq(0)
E:last: The last matching element
E:even: Take the even-numbered element from the matched element set
E:odd: Take odd-numbered elements from the matched element set
E:parent: Select all elements that contain child elements (including text nodes)
E:contains('test'): Select all elements containing Elements that specify text
Form selector:
E:input: Select form elements (input, select, textarea, button)
E:text: Select all text areas (type="text")
E:password: select all password fields (type="password")
E:radio: select all radio buttons (type="radio")
E:checkbox: select all checkboxes (type= "checkbox")
E:submit: Select all submit buttons (type="submit")
E:image: Select all image fields (type="image")
E:reset: Select all clear Domain (type="reset")
E:button: Select all buttons (type="button")
Of course including E:hidden
8.xPath path query:
First introduce the syntax of xPath:
/: Select the root node
//: Select all nodes that meet the conditions in the document, no matter where the node is located
.: Select the current node
.. :Select the parent node of a single previous node
@:Select attributes, this has been mentioned before (attribute selector)
nodename:Select all nodes under the node
Application in jQuery:
Root Nodes are rarely used, commonly used examples are as follows:
$("div/p") is equivalent to $("div>p")
$("div//p") is equivalent to $("div p")
$("//div/../p"): The p tag under the parent node of all div nodes
also has relative path writing and supported Axis selectors. I don’t know how to apply it yet, so I won’t introduce it... There are already a lot of other uses of
$:
$ (html node): dynamically created based on the original HTML tag string provided DOM elements wrapped by jQuery objects. For example:
$("Hello").appendTo("#body");//Add Hello to the body element
$(document): Web page document object
$(document.body): Web page body object, which is the same as $("body")
$(function): This function is executed after the DOM is loaded. So $(document).ready() can be written Do $()
$(selector part, selector source): This example illustrates
$("input:radio",document.forms[0]): In the first form of the document, search All radio buttons
$("div",xml.responseXML): Query all div elements in the specified XML document
The selector source can be: DOM element, document or jQuery object as context
Also There are two: $.extend(prop) and $.noConflict() are compatible with plug-ins and other libraries. We will write
drop-down boxes, radio button boxes, and multi-select boxes in the future
1, drop-down box:
var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //Get the text of the selected item in the drop-down menu (Note that there are spaces in the middle)
var cc2 = $('.formc select[@name="country"]').val(); //Get the value of the selected item in the drop-down menu
var cc3 = $ ('.formc select[@name="country"]').attr("id"); //Get the ID attribute value of the selected item in the drop-down menu
$("#select").empty(); //Clear the drop-down box//$("#select").html('');
$("1111").appendTo("#select")//Add the option of the drop-down box
A little explanation Here's a look:
1.select[@name='country'] option[@selected] means the option element with the selected attribute in the select element that has the name attribute,
and the attribute value is 'country';
It can be seen that anything starting with @ means that it is followed by attributes.
2, radio button:
$("input[@type=radio][@checked]").val(); //Get the value of the selected item of the radio button (note the middle No spaces)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //Set the radio button value=2 to the selected state. (Note that there is no space in the middle)
3, check box:
$("input[@type=checkbox][@checked]").val(); //Get the check box selected The value of the first item
$("input[@type=checkbox][@checked]").each(function(){ //Since multiple check boxes are generally selected, the output can be looped
alert($(this).val());
});
$("#chk1").attr("checked",'');//uncheck
$("#chk2").attr("checked",true);//Tick
if($("#chk1").attr('checked')==undefined){} // Determine whether it has been checked