jquery Getting started the next day &&& regular expression completion--making of imitation smarty engine

Source: Internet
Author: User

Hi

Monday completely not in the state ... Noon also to the spectator, did not sleep me, the night smarty do not know can finish, refueling bar

1. JQuery

---filter selector (ii)---

--[attribute=value] Property Selector

property as an important feature of a DOM element or in a selector, the selector for getting elements through element properties is introduced from this section, and [attribute=value] the function of the property selector is to get all the elements that are exactly the same as the property name and property value, where [] is a brace character that is dedicated to the property selector. The parameter attribute represents the property name, and the value parameter represents the property values.

<ul>
<li title= "Vegetables" > Eggplant </li>
<li title= "Fruit" > Banana </li>
<li title= "Vegetables" > Celery </li>
<li title= "Fruit" > Apple </li>
<li title= "Fruit" > Watermelon </li>
</ul>

<script type= "Text/javascript" >
$ ("li[title= ' vegetables ')"). CSS ("Background-color", "green");

[attribute=value]In contrast to the property selector, [attribute!=value] the function of the property selector is to get all elements that do not contain a property name, or that are not the same as the property name and property value, where [] is a brace character that is dedicated to the property selector, the parameter attribute represents the property name, and the value parameter represents the property value.

--[attribute*=value] Property Selector

Describes a more powerful property selector [attribute*=value] that can get all the elements in the property value that contain the specified content, where [] is a brace character that is dedicated to the property selector, the parameter attribute represents the property name, and the value parameter represents the corresponding property value.

<ul>
<li title= "Vegetables" > Eggplant </li>
<li title= "Fruit" > Banana </li>
<li title= "Vegetables" > Celery </li>
<li title= "Ginseng Fruit" > Small tomato </li>
<li title= "Fruit" > Watermelon </li>
</ul>

<script type= "Text/javascript" >

$ ("li[title*= ' fruit ')"). CSS ("Background-color", "green");

--: First-child Sub-element filter Selector

Learning from the above chapters, we know that using :first a filter selector can get the first child element in the specified parent element, but the selector returns only one element, not a collection, and the :first-child child element filter selector allows you to get the first child element returned in each parent element, which is a collection, The selection process of multiple collection data is often used.

<ol>
<li> Celery </li>
<li> Eggplant </li>
<li> Radish </li>
<li> Chinese cabbage </li>
<li> Tomatoes </li>
</ol>
<ol>
<li> oranges </li>
<li> Banana </li>
<li> Grapes </li>
<li> Apple </li>
<li> Watermelon </li>
</ol>

<script type= "Text/javascript" >
$ ("Li:first-child"). CSS ("Background-color", "green");

$ ("Li:last-child"). CSS ("Background-color", "Blue");

In :first-child contrast to the child element filter Selector feature, :last-child the function of a child element filter selector is to get the last child element returned in each parent element, which is also a collection that is often selected for multiple collection data.

---the form selector---

--:input form Selector

How do I get all the elements of my form? :inputthe form selector can be implemented, and its function is to return all of the table cells , including not only all <input> tagged form elements, but also <textarea>, <select>, and < Button> the form element that is marked, so that it chooses the most extensive form element.

<form id= "Frmtest" action= "#" >
<input type= "button" value= "input button"/><br/>
<select>
<option>Option</option>
</select><br/>
<textarea rows= "3" cols= "8" ></textarea><br/>
<button>
Button</button><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest: Input"). AddClass ("Bg_blue");
</script>

--:text Form Text Selector

:textThe form text selector can get all the lines of text input box elements in the form, and a single line of text input boxes is like a non-wrapping note tool that is widely used.

<form id= "Frmtest" action= "#" >
<input type= "text" id= "Text1" value= "I'm a little note"/><br/>
<textarea rows= "3" cols= "8" ></textarea><br/>
<input type= "text" id= "Text2" value= "I'm also a little note"/><br/>
<button>
Button</button><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest: Text"). AddClass ("Bg_blue");
</script>

--:p assword form password Selector

If you want to get the password input text box, you can use the :password selector, which is the function of getting all the password input text box elements in the form.

<form id= "Frmtest" action= "#" >
<input type= "text" id= "Text1" value= "single line text input box"/><br/>
<input type= "Password" id= "Text2" value= "Password text input box"/><br/>
<textarea rows= "3" cols= "8" > Area text input box </textarea><br/>
<input type= "Password" id= "Text3" value= "Password text input box"/><br/>
<button>
Button</button><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest:p assword"). AddClass ("bg_red");
</script>
</body>

--:radio radio Button Selector

Radio buttons in a form are often used for only one selection in multiple data, and :radio a selector makes it easy to get all the radio button elements in a form.

<form id= "Frmtest" action= "#" >
<input type= "button" value= "input button"/><br/>
<input id= "Radio1" type= "Radio"/>
<label for= "Radio1" >
Male </label>
<input id= "Radio2" type= "Radio"/>
<label for= "Radio2" >
Female </label><br/>
<button>
Button</button><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest: Radio"). attr ("Disabled", "true");
</script>

--:checkbox check box Selector

The checkboxes in the form are often used for the selection of multiple data, and :checkbox you can use selectors to quickly locate and get the check box elements in the form.

<form id= "Frmtest" action= "#" >
<input type= "button" value= "input button"/><br/>
<input id= "Checkbox1" type= "checkbox"/>
<label for= "Checkbox1" >
Tomato </label><br/>
<input id= "Checkbox2" type= "checkbox"/>
<label for= "Checkbox2" >
Eggplant </label><br/>
<input id= "Checkbox3" type= "checkbox"/>
<label for= "Checkbox3" >
Cucumber </label><br/>
<button>
Button</button><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest: CheckBox"). attr ("Disabled", "true");
</script>

--:submit Submit Button Selector

Typically, only one submit button with a "type" attribute value of "submit" is allowed in a form, and :submit the selector can be used to get the submit button element in the form.

<form id= "Frmtest" action= "#" >
<input type= "button" value= "input button"/><br/>
<input type= "Submit" value= "point I submitted"/><br/>
<button>
Button</button><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest input:submit"). AddClass ("bg_red");
</script>

--:image Image Domain Selector

When a <input> element's "type" property value is set to "image", the element is an image field, and the :image selector can be used to quickly get all the elements of that class.

<form id= "Frmtest" action= "#" >
<input type= "image" Src= "http://img.mukewang.com/52b284ea00016b2902590070.jpg"/><br/>
<br/>
<br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest: Image"). AddClass ("bg_red");
</script>

--:button Form Button Selector

There are many types of buttons in the form, and you :button can use selectors to get and get only the common button elements of <input> and <button> of the "type" property with the Value "button".

<form id= "Frmtest" action= "#" >
<input id= "Button1" type= "button" value= "I am the normal button"/><br/>
<input id= "Submit1" type= "Submit" value= "point I will submit"/><br/>
<button> I am also the normal button </button><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest: Button"). AddClass ("Bg_blue");
</script>

--:checked Selected State Selector

Some elements are selected, such as check boxes, radio button elements, and when selected, the value of the Checked property is "checked", called: checked can get all the elements that are in the selected state.

<form id= "Frmtest" action= "#" >
<input id= "Radio1" type= "Radio" checked= "checked"/>
<label id= "Label1" for= "Radio1" >
Apple </label><br/>
<input id= "Radio2" type= "Radio"/>
<label id= "Label2" for= "Radio2" >
Orange </label><br/>
<input id= "Checkbox1" type= "checkbox" checked= "Checked"/>
<label id= "Label3" for= "Checkbox1" >
Litchi </label><br/>
<input id= "Checkbox2" type= "checkbox"/>
<label id= "Label4" for= "Checkbox2" >
Grape </label><br/>
<input id= "Checkbox3" type= "checkbox" checked= "Checked"/>
<label id= "Label5" for= "Checkbox3" >
Banana </label><br/>
</form>

<script type= "Text/javascript" >
$ ("#frmTest: Checked"). attr ("Disabled", true);
</script>

--:selected Selected State Selector

The :checked :selected selector can only get the <option> option element in the <select> drop-down list box when compared to the selector.

<form id= "Frmtest" action= "#" >
<select id= "Select1" multiple= "multiple" >
<option value= "0" > Apple </option>
<option value= "1" selected= "selected" > Oranges </option>
<option value= "2" > Lychee </option>
<option value= "3" selected= "selected" > Grapes </option>
<option value= "4" > Banana </option>
</select><br/><br/>
<div id= "Tip" ></div>
</form>

<script type= "Text/javascript" >
var $txtOpt = $ ("#frmTest: Selected"). Text ();
$ ("#tip"). HTML ("selection:" + $txtOpt);
</script>

----------------------------------------------------------------

2. Regular expressions

jquery Getting started the next day &&& regular expression completion--making of imitation smarty engine

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.