jQuery control page

---

Before you begin, you need to have the following knowledge points

• JavaScript Basics
• JavaScript DOM knowledge
• jQuery selector

First, the operating element content and the value

• Value elements : the element is an attribute value corresponding to the most elements have valueproperties
• Element content : refers to the start and end tags defined in the middle of the element's content, he is divided into:
  • Text content Text content does not contain child elements, contains only elements:
  • HTML content : text content includes not only the elements, but also the child of the element

1, the operation of element content

Because the element is divided into two categories, so it can be divided into two operations:

(1) Operation of the text

For text: jQueryit provides two methods

• text()For acquiring contents all matching elements: text content of the text of all matching elements comprising combining
• text(val): Text element is used to set all matches

For example, in a HTML, text content and output to get the div element, it can be:

alert($("div").text());

Reset the contents of the div element:

$("div").text("我和你吻别");

(2) Operation of the HTML content

Similarly, jQuery provides two methods of operation HTML content

• html(): HTML content for obtaining matching elements
• html(val): Used to set the entire match HTML content elements

For example, there is such a HTML code:

<div>
    <span id="demo">张学友</span>
</div>

Use html()get elements:

alert($("div").html());

Results are as follows:

the visible elements of the HTML content of his entire output inside.

Use html(val)settings:

$("div").html("往事消散成云烟，消散在彼此眼前");

The last page output sentence

Examples: text (val) and html (val) compared

Using the same statement, set, first look at the results:

Step 1: Write the HTML code, two div元素are idrespectively set div1and div2, HTML code is not given

Step 2: introducing jQuery library, and then use the method set two:

    $(document).ready(function () {
        $("#div1").text("<span style='color: red'>重新设置的文本内容</span>");
        $("#div2").html("<span style='color: red'>重新设置的文本内容</span>");
    });

carry out! It can be seen that apparent contrast.

3, the operation of element values

jQuery provides three methods of operating element values: (PC side watch better)

method	Explanation	Examples
val()	Gets the current value of matching elements, may also be a string array. For example: when selectelement has two selected values and returns the result is an array	$("#username").val();// Get the id usernamevalue of the element
val(val)	All values ​​matching elements	$("input:text").val("新值") // set the value for the entire text box
val(arrVal)	Is used checkbox, select, radiothe element value or the like is provided, the parameter is an array of strings	$("select").val(['1','2']) // set the value for the multiple choice drop-down list box

Examples: two user determines whether the input password is consistent

First look at the effect of:

Step 1: Write a form, which contains these contents, HTML code is not given

Step 2: introducing jQuery library, and then write jQuery code, used to directly judge like:

    $(document).ready(function () {
        $("input[type='button']").click(function () {
            if($("#Pwd1").val()!=$("#Pwd2").val())
                alert("两次密码输入不一致");
            else
                alert("两次密码一致");
        });
    });

Second, the operation of the DOM node

What DOM nodes are? Please point me to go to the link!

1, create a node

Consists of two steps, the first step in creating a new element, the second step will be a new element into the document (the parent element)

There are three ways to insert a node:

//方法1
var $p = $("<p></p>");
$p.html("<span style='color:red'>方法一添加内容</span>");
$("body").append($p);
//方法2
var $p = $("<p><span style='color: red'>方法二添加</span></span></p>");
$("body").append($p);
//方法3
$("body").append("<p><span style='color: red'>方法三添加</span></p>");

2, the insertion node

Application of the above-mentioned append()method is inserted into the defined node <body>, the further insertion node is inserted into the inner and outer

(1) is inserted into the interior

Method inserted inside

method	Explanation	Examples
append(content)	All additional content for the internal matching elements	$("#B").append("<p>A</p>") @ Id of the element B is added in a paragraph
appendTo(content)	Add all matched elements to another element in the collection of elements	$("#B").appendTo("#A") // back to the id of the element B is added to the id of the element A
prepend(content)	Front internal contents of all matched elements	$("#B").prepend("<p>A</p>") // Add a paragraph before the element to the id of the content B
prependTo(content)	为所有匹配元素前置到另一个元素集合中	$("#B").prependTo("#A") //将id为B的元素添加到id为A的元素前面

（2）外部插入

外部插入的方法

方法	说明	示例
after(content)	在每个匹配的元素之后插入内容	$("#B").after("<p>A</p>") //向id为B的元素的后面添加一个段落
insertAfter(content)	将所有匹配的元素插入到另一个指定元素集合的后面	$("<p>A</p>").insertAfter("#B") //将要添加到的段落插入到id为B的元素之后
before(content)	在每个匹配的元素之前插入内容	$("#B").before("<p>A</p>") //向id为B的元素前面添加一个段落
insertBefore(content)	将所有匹配的元素插入到另一个指定元素的元素集合的前面	$("<p>A</p>").insertBefore("#B") //将要添加到的段落插入到id为B的元素之前

3、删除节点

删除节点提供了两种方法：

• empty()：用于删除匹配元素集合中的所有子节点，并不删除该元素，把儿子都杀了
• remove([expr]) ：从DOM中删除所有匹配元素

有一段这样的HTML代码：

div1:
<div id="div1" style="border: 1px solid #0000FF; height: 26px">
    <span>往事消散成云烟，消散在彼此眼前</span>
</div>
div2:
<div id="div2" style="border: 1px solid #0000FF; height: 26px">
    <span>往事消散成云烟，消散在彼此眼前</span>
</div>

我们用这两种方法看一下区别，写入jQuery代码：

$(document).ready(function () {
    $("#div1").empty();
    $("#div2").remove();
});

看一下效果：

可以发现，div1中仅仅留了个爸爸，div2是全家都没了。

4、复制节点

复制节点用clone()方法，它有两种形式：

• 不带参数形式，用于克隆匹配的DOM元素并且选中这些克隆的副本
• 带有一个布尔型的参数，当参数为真，表示克隆匹配的元素及其所有的事件处理并且选中这些克隆的副本；当参数为假，表示不复制元素的事件处理

比如，在页面添加一个按钮，并为该按钮绑定单击事件，在单击这个按钮之后复制该按钮，但不复制它的事件处理：

$(function () {
    $("input").bind("click",function () {   //为按钮绑定单击事件
        $(this).clone().insertAfter(this);  //复制自己但不复制事件处理
    });
});

5、替换节点

有两种替换节点的方法：

• replaceAll(selector)：使用匹配元素替换掉所有selector匹配到的元素
• replaceWith(content)：将所有匹配的元素替换成指定HTML或DOM元素

比如，使用replaceWith()方法替换页面中的id为div1的元素，以及使用replaceAll()替换id为div2的元素：

$(document).ready(function () {
    //替换id为div1的元素
    $("#div1").replaceWith("<div>replaceWith()替换方法</div>");
    //替换id为div2的div元素
    $("<div>repalceAll()方法的替换结果</div>").replaceWith("#div2");
});

例子：模仿一个简易的QQ农场

篇幅有限，请点击这里，访问这篇博客

三、对元素属性进行操作

下表展示了一些元素属性方法：

方法	说明	示例
attr(name)	Getting a property value of the first element match (no return value undefined)	$("img").attr('src') // get the src attribute value in the first page of the img element
attr(key,value)	Setting a property value (for all the matching element keyvalue set)	$("img").attr("title","hello world") // add a caption to a picture property, the property value of the latter
attr(key,fn)	All elements that match a set function returns the property is worth ( fnrepresentation function)	$("#fn").attr("value",function(){return this.name;}) // The name of the element as its value the property value
attr(properties)	All elements are set to match ({name: value name: value}) in the form of a plurality of properties simultaneously	$("img").attr({src:"test.png",title:"图片"}) // add two properties at the same time as the picture, they are src and title
removeAttr(name)	To delete a property for all matching elements	$("img").removeAttr("title") // remove all pictures of the property title

Fourth, CSS style elements to operate

1, by modifying the CSS class

If you want to change the overall effect of one element may be achieved by modifying the CSS class element is used, jQuery provides several methods for modifying the CSS class, as shown in the following table:

method	Explanation	Examples
addClass(class)	Adds the specified CSS class name to match all the elements	$("div").addClass("blue line")// Add the blue line and two CSS classes for all of the div element
removeClass(class)	Delete all or a specified CSS class from all matched elements	$("div").removeClass("line") // delete all the div element CSS class name for the line
toggleClass(class)	If there are deleted, does not exist ye add a CSS class	$("div").toggleClass("yellow")
toggleClass(class,switch)	If the switch is true parameter to add the corresponding CSS class, or delete usually switch is a boolean variable	$(toggleClass("show",true))

2, by modifying the CSS property

jQuery also provides a method of modifying the style property in response element

method	Explanation	Examples
css(name)	Returns the first matching element of style attributes	$("div").css("color") color property value // get the first match of the div element
css(name,value)	Specify the style settings for all matching elements	$("img").css("border","1px solid red") // set the border style for all img elements
css(properties)	To {attribute: value, attribute: value, ......} for all matching elements in the form of set style properties	$("tr").css{"backgound-color":"red","font-size":"14px"}