jQuery operation element attributes:
<HTML>
<head>
<title> element operation jQuery attribute </ title>
<Meta charset = "UTF-. 8" />
<Script the src = "JS / jQuery-1.9.1.js" type = "text / JavaScript "charset =" UTF-. 8 "> </ Script>
<-!
the jQuery operating element attributes:
acquire:
object name .attr (" attribute name ") // return the current value of the
note can not be acquired in this way in real time value attribute data, using object names .val () is acquired.
Modify
object name .attr ( "attribute name", "attribute value");
->
<! - js code declaration field ->
<Script type = "text / JavaScript">
function TestField () {
// Get element Object
var uname = $ ( "# uname");
// get
alert (uname.attr ( "type") + ":"
uname.attr("type","button");
}
</script>
</head>
<body>
<h3>jquery操作元素属性</h3>
<input type="button" name="" id="" value="测试获取元素属性" onclick="testField()" />
<input type="button" name="" id="" value="测试修改元素属性" onclick="testField2()" />
<hr />
用户名:<input type="text" name="uname" id="uname" value="哈哈" />
</body>
</html>
jQuery operating elements:
<HTML>
<head>
<title> element jQuery operating the HTML </ title>
<Meta charset = "UTF-. 8" />
<-! include jQuery File ->
<Script the src = "JS / jQuery-1.9.1 .js "of the type =" text / JavaScript "charset =" UTF-8 "> </ Script>
<-!
jQuery operating element content learning:
acquiring element object
1, to obtain
the object name .html () // returns the current object All content, including HTML tags.
Object name .text () // Returns the current text object, no HTML tags
2, modify the
object name .html ( "new content") // new content will cover the original content, HTML tags will be resolved execution
object name .text ( "new content") // new content will cover the original content, HTML tags will not be parsed
->
<! - statement js code domain ->
<Script of the type = "text / javascript ">
// Get the element content
<H3> operating element HTML </ h3>
}
Function testHtml2 () {
// Get element object
var showdiv = $ ( "# showdiv");
// Modify element content
showdiv.html (showdiv.html () + "< i> a nice day, for grasping devils < / I> ");
}
function testText () {
// Get element object
var showdiv = $ (" # showdiv ");
// Get element content
Alert (showdiv.text ());
}
function testText2 () {
// Get element object
var showdiv = $ ( "# showdiv");
// modify element content
showdiv.text ( "<i> a nice day, for grasping devils </ I>");
}
</ Script>
</ head >
<body>
<INPUT type = "Button" name = "" ID = "" value = "Test element content acquisition --html () "onclick =" testHtml () "/>
<input type = "button" name = "" id = "" value = " modified test element content --html ()" the onclick = "testHtml2 ()" />
<INPUT type = "Button" name = "" ID = "" value = "element content acquisition test --text ()" the onclick = "testText ()" />
<INPUT type = "Button" name = "" ID = "" value = "element content --text modified test ( ) "the onclick =" testText2 () "/>
<div ID =" showdiv ">
<B> of work has eight </ b> Imperial foregoing
</ div>
</ body>
</ HTML>
Style operating element <:
<html>
<head>
<title>操作元素样式</title>
<meta charset="UTF-8"/>
<!--声明css-->
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
.common{
width: 300px;
height: 300px;
border: solid 1px;
background-color: blueviolet;
}
.dd{
font-size: 30px;
font-weight: bold;
}
</style>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
1, a CSS ()
Style jquery operation element
<! -
.Css object name ( "attribute name") // return the current value of the style
object name .css ( "attribute name", "attribute value") // add, modify the style element
object name .css ({ "Style Name ":" value style "," style name ":" value style "......}) // use json mass participation, improve the efficiency of writing code.
2, addClass ()
object name .addClass ( "triage the device name") // append a class style
object name .removeClass ( "class selector name") // delete a specified class style
->
<! - js code declaration field ->
<Script type = "text / JavaScript">
// operating the jQuery CSS style --- ()
function testCss () {
// Get element object
var showdiv = $ ( "# showdiv ") ;
// style operation - increase
showdiv.css ( "background-Color", "Orange");
// operating styles - Get
alert (showdiv.css ( "width") );
// operation pattern
div.css ({ "border": "Solid 1px", "width": "300px by", "height": "300px by"});
}
// jQuery operation pattern --addClass ()
function testAddClass ( ) {
// get the element object
var div = $ ( "# div01");
// style operating element
div.addClass ( "Common");
}
function testAddClass2 () {
// get the element object
var div = $ ( "# div01 ");
// style operating element
div.addClass (" dd ");
}
function testRemoveClass () {
// Get element object
var div = $ (" # div01 ");
// delete the style element
div.removeClass (" dd ");
}
</script>
</head>
<body>
<H3> operating element style </ h3>
<input type="button" name="" id="" value="操作样式---css()" onclick="testCss()" />
<input type="button" name="" id="" value="操作样式---css()--json" onclick="testCss2()" />
<input type="button" name="" id="" value="操作样式---addClass()" onclick="testAddClass()" />
<input type="button" name="" id="" value="操作样式---addClass()--2" onclick="testAddClass2()" />
<input type="button" name="" id="" value="操作样式---removeClass" onclick="testRemoveClass()" />
<hr />
<div id="showdiv">
</div>
<div id="div01" class="common dd">
我是div01
</div>
</body>
</html>
Operation document structure:
) The specified content is added to the object inside the appendTo (element object or selector) the elements of the object developed by adding to a specified target content
The prepend () specified appends the interior of the object in front of
prependTo () will be developed element objects added to the contents of the specified object in front of
2, the outer insert
after the specified content to the specified element is added later
before the specified content is added to the previously specified elements
insertAfter to match all elements into another, the specified set of elements later
insertBefore all matching elements into another, previously specified set of elements.
3, parcel
4, replacing
5, remove
function testAfter () {
empty ()
->
<-! js code declaration field ->
<Script type = "text / JavaScript">
// inner insert
function testAppend () {
// Get element object
var div = $ ( "# showdiv " );
// use the inner insert
div.append ( "<i>, rice </ I>");
}
function testAppendTo () {
// Get element object
var div = $ ( "# showdiv");
// use appendTo ()
$ ( "# U1") the appendTo (div);.
}
function testPrepend () {
// Get element object
var div = $ ( "# showdiv");
// use The prepend ()
div.prepend ( "<I > Hello, </ i> ");
}
// outer insert
// Get element object
var div = $ ( "# showdiv ");
// using an external after insertion
div.after ( "<b> The weather today is good for learning </ b>");
}
function testBefore () {
// get the element object
var div = $ ( "# showdiv");
/ / external use before insertion
div.before ( "<b> The weather today is good for learning </ b>")
}
function testEmpty () {
$ ( "# showdiv"). empty ()
}
</ Script>
<style of the type = "text / CSS">
#showdiv {
width: 300px by;
height: 300px by;
border: 3px Orange Solid;
}
</ style>
</ head>
<body>
<H3> operation document structure </ H3>
<input type="button" name="" id="" value="测试append" onclick="testAppend()" />
<input type="button" name="" id="" value="测试appenTo" onclick="testAppendTo()" />
<input type="button" name="" id="" value="测试prepend" onclick="testPrepend()" />
<hr />
<input type="button" name="" id="" value="测试after" onclick="testAfter()" />
<input type="button" name="" id="" value="测试before" onclick="testBefore()" />
<input type="button" name="" id="" value="测试删除--empty()" onclick="testEmpty()" />
<hr />
<u id="u1">每天下午都是充斥着面包浓浓的香味</u>
</ HTML>
</ body>
</ div>
<b> What to eat at noon today </ b>
<div the above mentioned id = "showdiv">
Operating table:
<HTML>
<head>
<title> Table jQuery operation </ title>
<Meta charset = "UTF-. 8" />
<-!
content jQuery study:
. 1, the principle jQuery package (closure, from anonymous call)
2, jQuery selectors
3, jQuery attribute manipulation of elements, content, style, document structure
4, jQuery events
5, jQuery animations
Note:
be sure not to operate combo
js, jQuery is a dynamic scripting language, with HTML to operate, so that the interaction between the user and the web page
HTML to format display information
CSS style used to increase the web page
are parsed by the browser to execute
Note:
All web pages are stored on the server side, running in the browser .
All pages are based on real-time server request is sent to the browser execution.
All data pages can be dynamic stitching.
->
<-!
. 1, the operation jQuery checkbox
selection state operation using checkbox prop () method
prop ( "checked"
prop ( "checked", true) // set to the selected state
// bind the event to the button
prop ( "checked", false) // unselected state is set to
use each to traverse
the object name .each (fn) // when each object will traverse the default execution fn function
this represents js objects
$ (this) represents jQuery object
Parents ( "tag name") // Get the specified element object superior
parent ()
2, jQuery operation table
->
<Script the src = "JS / jQuery-1.9.1.js" type = "text / JavaScript" = charset "UTF-8"> </ Script>
<Script of the type = "text / JavaScript">
// realized Select
$ (function () {
// bind the click event to the button
$ ( "# btn1"). the Click (function () {
// Select realized
$ ( "INPUT [type = 'CheckBox']") prop ( "the checked", to true);.
});
})
// achieve deselect
$ (function () {
// do not choose to achieve full
$("#btn2").click(function(){
$("input[type='checkbox']").prop("checked",false);
})
})
//反选
$(function(){
//给按钮绑定事件
$("#btn3").click(function(){
$("input[type='checkbox']").each(function(){
//alert(this.checked);
$(this).prop("checked",!$(this).prop("checked"));
})
})
})
//选择奇数行
$(function(){
$("#btn4").click(function(){
$("input[type=checkbox]:odd").prop("checked",to true)
$ ( "# btn5"). the Click (function () {
$ (function () {
// interlaced color
})
})
$("tr:odd").css("background-color","orange");
})
})
//删除选中的行
$(function(){
$("#btn6").click(function(){
$(":checkbox:checked").parents("tr").remove();
})
})
//添加行---操作文档结构
$(function(){
$("#btn7").click(function(){
$("tr:last").after("<tr><td><input type='checkbox' name='chk' id='chk' value='' /></td><td>"+name+"</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>");
})
})
</script>
<style type="text/css">
tr{
height: 35px;
<H3> operating table </ h3>
<body>
</ style>
}
width: 100px;
TD {
}
</head>
<input type="button" name="" id="btn1" value="全选" />
<input type="button" name="" id="btn2" value="全不选" />
<input type="button" name="" id="btn3" value="反选" />
<input type="button" name="" id="btn4" value="选择奇数行" />
<input type="button" name="" id="btn5" value="隔行变色" />
<input type="button" name="" id="btn6" value="删除行" />
<input type="button" name="btn7" id="btn7" value="添加行" />
<hr />
<table border="1px">
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12344</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12355</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12366</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12377</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>