Property operations
jquery property control module is divided into four parts: html attribute manipulation, DOM attribute operations, and the operation value of the operation type style
-
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr() -
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp() -
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass() -
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
</ head>
<body>
<div class = "Box">
</ div>
<Script the src = "jQuery-3.3.1.js"> </ Script>
<Script>
// JS: the getAttribute () the setAttribute ()
// jQ: attr () may be provided a plurality of set property class attribute is not recommended easily covered with removeClass toggleClass. addClass
// removeAttr () Removes an attribute
// js object properties for the operation, setting and removing operation prop (), RemoveProp ()
$ (function () {
// $ ( '. Box' ) .html ( '<a href="http://www.baidu.com"> Baidu twice </a>');
$('.box').html('<a id="anchor"></a>');
$ ( '#anchor') .attr ( 'href', 'http: //www.baidu.com') .text ( ' two lower Baidu');
})
</ Script>
</ body>
</ HTML>
Document Actions
Document operation includes four blocks: insert edit operation deletion cloning operation
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
</ head>
<body>
<div class = "Box">
. 11
< / div>
<span> 22 is </ span>
<UL> 33 is </ UL>
<Button> 44 is </ Button>
<H2> 22 is </ H2>
<H5> 55 </ H5>
<Script the src = "JQuery 3.3.1.js "> </ Script>
<Script>
$ (function () {
// 11111111111111 insert
@ 1 is inserted into the parent element may be a child element: stirng | element (js objects) | jQuery element
$ ( '.Box '.) the append (' <a> </a>. 11 ');
$ (' ha Box ').') the append (. ';
$('.box').append($('span'));
// 2. The sub-elements appended to the parent element stirng, element (js objects), jquery element
$ ( '<P> </ P>') the appendTo ($ ( 'div'));.
// 3. Add to the parent the first position of the element
$ ( 'ul') prepend ( '<li> first son </ Li>');.
// 4. added to the first position of the parent element
$ ( '<p> < /p>').prependTo('ul ');
// 5. the inserted after the matched elements
$ (' ul <h4> I is a heading h3 </ H4> ')') after (. ';
$ ( '<h5> I am a h5 heading </ h5>') insertAfter ( 'ul');.
$ ( 'ul') the before ( '<h3> I am a h3 heading </ h3>');.
$ ( '<h2> I am an h2 heading </ h2>') insertBefore ( 'ul').;
// 22222222222222 cloning operations
. $ ( 'Button') the Click (function () {
// 1.clone (): Cloning matched DOM elementsthe Click (function () {
// 2.clone (to true): elements and all of its event handlers and check copies of these clones (in short, have a copy of Mami same event processing capability)
$ (the this) .clone (to true) .InsertAfter (the this);
});
// 33333333333333 modification operation
// replace all of a title tag h5
$ ( 'h5') The replaceWith ( '<a href="#"> </a> Hello World');.
// title tag all h5 dom element is replaced with the app id
$ ( 'H5') the replaceWith ($ ( '# app'));.
$ ( '<H5> 55 </ H5>') the replaceAll ( 'H2');.
// 44,444,444,444,444 delete
$ ( 'ul') remove ();.
// ul emptied out in the sub-elements, to retain ul
$ ( 'ul') empty ();.
})
</ Script>
</ body>
</ HTML>
Stop bubbling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.fu{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: red;
display: none;
}
a{
text-decoration: none;
}
ul li{
float: left;
width: 100px;
height: 20px;
margin: 0 auto;
}
ul{
list-style: none;
}
.up{
color: blue;
cursor: pointer;
}
</style>
</head>
<body style="height: 2000px">
<a href="javascript:void(0)" id="changeFu">换肤</a>
<div class="fu">
<ul>
<li>
<a href="javascript:void(0)">女神来临</a>
</li>
<li>
<a href="javascript:void(0)">明星</a>
</li>
<span class="up">收起</span>
</ UL>
</div>
<Script the src = "jQuery-3.3.1.js"> </ Script>
<Script>
$ (function () {
$ ( '# changeFu'). the Click (function (Event) {
// stop the current the default behavior label
the event.preventDefault ();
// prevent bubbling
that event.stopPropagation ();
$ ( 'FU.') slideDown (1000);.
// that event.stopPropagation (); the event.preventDefault + (); = to false return
});
$ (. 'body, .UP') the Click (function (Event) {
$ ( '. FU') slideUp (1000);.
});
$ ( '. A Li FU UL').click(function (event) {
event.stopPropagation();
$(this).css('color', 'yellow').parent('li').siblings('li').find('a').css('color', 'blue');
});
$('.fu').click(function () {
return false;
})
})
</script>
</body>
</html>
Event delegates
Using the principle of bubbling, the event is added to the parent, the effect of triggering execution
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> the Title </ title>
</ head>
<body>
<UL>
<Li> Pan Shuai < / Li>
</ UL>
<button ID = "BTN"> button </ button>
<button ID = "btn1"> button. 1 </ button>
<INPUT type = "text">
<Script the src = "jQuery-3.3 .1.js "> </ Script>
<Script>
$ (function () {
// event delegate
// If there is the possibility of future additional element appears prioritize the use of event delegation to handle
$ ( 'ul'). on ( 'click', 'li',function () {
alert(111);
});
$('ul').append('<li>和苏</li>');
// hover synthetic event imitate mouseenter / leave only through the parent element is called mouseover / out parent / child elements are calling
$ ( '# btn'). Hover (function () {
console.log ( 'enter') ;
}, function () {
the console.log ( 'leave');
});
// single double-click event
var Timer = null;
$ (. '# btn1') the Click (function () {
the clearTimeout (Timer);
Timer = the setTimeout (function () {
the console.log ( 'single');
}, 300);
// single double-click time is probably about 300ms to prevent conflicts two questions single
});
$ (. '# btn1') DblClick (function () {
the clearTimeout (Timer);
the console.log ( 'Dual ');
});
// lost focus event focus
// $ ( 'INPUT [type = text]') Focus ();.
// $ ( 'INPUT [type = text]') .blur ();
// up down key release event
$ ( 'INPUT [type = text]') keyDown (function () {.
the console.log (. 1);
});
$ ( 'INPUT [type = text ] ') keyUp (function () {.
console.log (1);
});
// form control events
// change the content of the event input label changes would trigger this event
// select event triggered when the selected event
// submit event default form form submit event
});
</ Script>
</ body>
</html>
Simply use the @media
Preparation 1: Set Meta Tags
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
parameter:
width = device-width: a width equal to the width of the current device
initial-scale: scaling the initial (default is 1.0, which represents no scaling)
user-scalable: whether the user can manually zoom (default is no, because we do not want the user to zoom the page)
Preparation 2: Load compatible files JS
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@media screen and (min-width: 1170px) {
body {
background-color:red;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
body {
background-color:yellow;
}
}
</style>
</head>
<body>
</body>
</html>