jQuery attribute manipulation
html() It can set and get the content in the start tag and end tag. Same as dom attribute innerHTML.
text() It can set and get the text in the start tag and end tag. Same as dom attribute innerText.
val() It can set and get the value attribute value of the form item. Same as the dom attribute value, the
val method sets the selected state of multiple form items at the same time:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
/*
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
*/
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
);
});
</script>
</head>
<body>
<body>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</body>
</html>
attr() and prop()
attr() can set and get the value of the attribute,It is not recommended to operate checked, readOnly, selected, disabled, etc.
The attr method can also manipulate non-standard attributes. For example, custom properties: abc,bbj
prop()You can set and get the value of the attribute, only recommended operations are checked, readOnly, selected, disabled, etc.
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//attr
// alert( $(":checkbox:first").attr("name") ); // 获取
// $(":checkbox:first").attr("name","abc") ; // 设置
// $(":checkbox").prop("checked",false );// 官方觉得返回undefined是一个错误
// $(":checkbox:first").attr("abc","abcValue");
// alert( $(":checkbox:first").attr("abc") );
});
</script>
Addition, deletion and modification of DOM
Internal insertion:
| Function name | operating |
|---|---|
| appendTo() | a.appendTo(b) inserts a at the end of the child element of b and becomes the last child element |
| prependTo() | a.prependTo(b) Insert a in front of all child elements of b and become the first child element |
External insertion:
| Function name | operating |
|---|---|
| insertAfter() | a.insertAfter(b) get ba |
| insertBefore() | a.insertBefore(b) get ab |
replace:
| Function name | operating |
|---|---|
| replaceWith() | a.replaceWith(b) Replace a with b |
| replaceAll() | a.replaceAll(b) Replace all b with a |
delete:
| Function name | operating |
|---|---|
| remove() | a.remove(); delete a tag |
| empty() | a.empty(); Empty the content in the a tag |
Code demo
// $("<h1>标题</h1>").prependTo( $("div") );
// $("<h1>标题</h1>").insertAfter("div");
// $("<h1>标题</h1>").insertBefore( $("div") );
// $("<h1>标题</h1>").replaceWith("div");
// $("div").replaceWith( $("<h1>标题</h1>") );
// $("<h1>标题</h1>").replaceAll( "div" );
$("div").empty();
CSS style manipulation.
| Function name | operating |
|---|---|
| addClass() | Add style |
| removeClass() | Delete style |
| toggleClass() | Delete if there is, add style if not. |
| offset() | Get and set the coordinates of the element. |
Code case
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
$divEle.addClass('redDiv blueBorder');
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
$divEle.removeClass();
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass('redDiv')
});
$('#btn04').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
var pos = $divEle.offset();
console.log(pos);
$divEle.offset({
top:100,
left:50
});
});
})
jQuery animation
Basic animation
| Function name | operating |
|---|---|
| show() | Show hidden elements |
| hide() | Hide the visible elements. |
| toggle() | Hide when it is visible, and show it when it is not visible. |
All of the above animation methods can add parameters.
1. The first parameter is the duration of animation execution, in milliseconds.
2. The second parameter is the callback function of the animation (a function that is automatically called after the animation is completed)
Fade in and fade out animation
| Function name | operating |
|---|---|
| fadeIn () | Fade in (slowly visible) |
| fadeOut() | Fade out (slowly disappear) |
| fadeTo () | Slowly modify the transparency to the specified value within the specified time. 0 transparent, 1 complete visible, 0.5 translucent |
| fadeToggle() | Fade in/out switch |
Code case
$(function(){
//显示 show()
$("#btn1").click(function(){
$("#div1").show(2000,function () {
alert("show动画完成 ")
});
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide(1000,function () {
alert("hide动画 执行完成 ")
});
});
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000,function () {
alert("toggle动画 完成 ")
});
});
// var abc = function(){
// $("#div1").toggle(1000,abc);
// }
// abc();
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(2000,function () {
alert("fadeIn完成 ")
});
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(2000,function () {
alert("fadeOut完成 ")
});
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo(2000,0.5,function () {
alert('fadeTo完成 ')
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle完成 ")
});
});
})
jQuery event operation
What is the difference between $( function(){} );
and
window.onload = function(){}
?
When did they trigger?
1. After the jQuery page has been loaded, the browser's kernel will execute it immediately after it has parsed the page tags and created a DOM object .
2. After the native js page is loaded, in addition to waiting for the browser kernel to parse the tags to create a DOM object, but also to wait for the loading of the content (tag content, such as pictures) required when the tag is displayed.
What order do they trigger?
1. Execute first after the jQuery page is loaded 2. After the
native js page is loaded
How many times did they execute?
1. After the native js page is loaded, only the last assignment function (overload coverage) will be executed.
2. After the jQuery page is loaded, all the registered function functions are executed in sequence.
Other event handling methods in jQuery:
| Function name | operating |
|---|---|
| click() | It can bind click events and trigger click events |
| mouseover() | Mouse in event |
| mouseout() | Mouse out event |
| bind() | You can bind one or more events to the element at once. |
| one() | The use is the same as bind. But the event bound to the one method will only respond once. |
| unbind() | The opposite of the bind method, unbind the event |
| live() | It is also used to bind events. It can be used to bind events of all elements matched by the selector. It works even if this element is dynamically created later |
Bubbling of events
What is bubbling of events?
Event bubbling means that the parent and child elements listen to the same event at the same time. When the event of the child element is triggered, the same event is also passed to the event of the parent element to respond.
So how to stop the event from bubbling up?
In the body of the child element event function, return false; can prevent the bubbling delivery of the event.
Code case
<script type="text/javascript">
$(function(){
$("#content").click(function () {
alert('我是div');
});
$("span").click(function () {
alert('我是span');
return false;//不然会显示'我是span'再显示'我是div'
});
})
</script>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
javaScript event object
The event object is a javascript object that encapsulates the triggered event information.
Our main concern is how to get this javascript event object. And use.
How to get the javascript event object?
When binding an event to an element, add a parameter to the function( event) parameter list of the event. We are used to name this parameter name event. This event is the event object passed by javascript to the event handler.
For example:
//1. Native javascript to get the event object
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
//2.jQuery code to get the event object
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
//3. Use bind to bind the same function to multiple events at the same time. How to get what event the current operation is.
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});