jQuery
overview
jq is the js library, which encapsulates the common operations of js
The role of jQuery
Simplifies the DOM tree operation of js
jq and js object conversion
js object: document.getElement() gets all js objects, most of which are properties
jq objects: most of $() are methods
Although jq is js in essence, the properties and methods of jq must be used to ensure that the object is a jQuery object rather than a DOM object obtained by js.
The object obtained by using the js method is the DOM object of js, and the object obtained by using jq is the jq object
Conversion syntax
js DOM object into jQuery object, syntax: $(js object)
jQuery object into js object, syntax: jquery object [index] or jquery object. get (index): general index write 0
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<span id="spanId"></span><br/>
<input type="button" value="插入内容" onclick = "writeIn()"/>
<input type="button" value="插入内容" onclick = "writeIn02()"/>
</body>
<script>
function writeIn() {
var spanEle = document.getElementById("spanId");
var $sE = $(spanEle);
$sE.html("hello...");
}
function writeIn02() {
var $spanEle = $("#spanId");
var spanEle = $spanEle[0];
spanEle.innerHTML = "hello";
}
</script>
</html>The use of events in jq
Use of basic events
click event
<body>
<input id="btnid" type="button" value="click"/>
</body>
<script>
$("#btnid").click(function () {
alert("点击")
})
</script>Gaining focus and losing focus
<body>
<input id="btnid" type="text" value="focus"/>
</body>
<script>
$("#btnid").focus(function () {
alert("获得了焦点");
});
$("#btnid").blur(function () {
alert("失去焦点");
});
</script>content change event
<body>
<select id="select">
<option value = "1">这是1</option>
<option value = "2">这是2</option>
<option value = "3">这是3</option>
<option value = "4">这是4</option>
</select>
</body>
<script>
$("#select").change(function () {
alert("内容改变为" + this.value);
}) ;
</script>mouse related events
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.js"></script>
<style>
#divId{
width:200px;
height:200px;
background: black;
}
</style>
</head>
<body>
<div id = "divId"></div>
</body>
<script>
$("#divId").mouseenter(function () {
$(this).css("backgroundColor","red");
});
$("#divId").mouseout(function () {
$(this).css("backgroundColor","blue");
});
</script>keyboard related events
<body>
<input id="inputId" type="text">
</body>
<script>
$("#inputId").keydown(function () {
console.log("键盘摁下")
})
$("#inputId").keyup(function () {
console.log("键盘抬起");
});
</script>Event binding and unbinding
Event binding
jq element object.on(event type, function(){})
Event unbinding
jq element object.off(event name)
<body>
<input id="btnid" type="button" value="click"/><br/>
<input id="bthid2" type="button" value="解绑">
</body>
<script>
var btn = $("#btnid");
btn.click(function () {
alert("helli")
})
$("#btnid2").on("click",function () {
btn.off("click");
});
</script>event switching
<body>
<div id = "divId"></div>
</body>
<script>
$("#divId").mouseenter(function () {
$(this).css("backgroundColor","red").
mouseout(function () {
$(this).css("backgroundColor","blue");
});
</script>jQ animation
basic effect
Method
show([speed],[easing],[fn]) Show element method
hide([speed],[easing],[fn]) Hide element method
toggle([speed],[easing],[fn]) switch element method
The parameter
speed is a string of one of three predetermined speeds ("slow", "normal", or "fast")
easing is used to specify switching, the default is swing, and the available parameters are
the functions that linear fn executes when the animation is completed, each element executes once
<body>
<input type="button" value="show()" id="btn1"/>
<input type="button" value="hide()" id="btn2"/>
<input type="button" value="toggle()" id="btn3"/><br/>
<div id="div1" style="width: 100px;height: 100px;border: 1px solid red;"></div>
</body>
<script>
$("#btn1").click(function () {
$("#div1").show(1000);
});
$("#btn2").click(function () {
$("#div1").hide(1000);
});
$("#btn3").click(function () {
$("#div1").toggle();
})
</script>sliding effect
Method
slideDowm([speed],[easing],[fn]) Slide down method
slideUp([speed],[easing],[fn]) Slide up method
slideToggle([speed],[easing],[fn]) toggle element method
fade effect
Method
fadeIn(same as above)
fadeOut(same as above)
fadeToggle(same as above)
jQ selector
basic selector
Tag selector (element selector) $("html tag name") Get all element id selectors that match the tag name $("#id attribute value") Get the element
class selector that matches the specified id attribute value $ (".class attribute value") Get elements that match the specified class attribute value
level selector
Descendant selector $("AB") selects all B elements inside A element child
selector $("A>B") selects all B child elements inside A element
sibling selector $("A+B") obtains A The next B element at the same level of the element
Brother selector $("A~B") Get all the B elements at the same level of the A element
attribute selector
$("A[property name]") contains a selector for the specified property
$("A[property name=value]") contains a selector for the specified property equal to the specified value
basic filter selector
First element selector: first Get the first element in the selected element
Last element selector: last Get the last element in the selected element
Non-element selector: not(selecter) Elements that do not include the specified content
Even selector: even Even, starting from 0
Odd selector: odd Odd, starting from 0
Equal to index selector: eq(index) Specify index element
Greater than index selector: gt(index)
Less than index selector: It(index)
form attribute selector
Available element selector: enabled Get available elements
Unavailable element selector: disable Get unavailable elements
Selected selector: checked Get radio/check box selected elements
Selected selector: selected Get drop-down box selected elements
JQ operation style
Method
css(name) Get CSS style
css(name,value) Set CSS style
<body>
<div id="divId" style="width: 100px ; height: 100px ; background-color: #ff0000;"></div>
<input type="button" value="获得背景色样式值" id="btn01"/>
<input type="button" value="设置背景色样式" id="btn02"/>
</body>
<script>
$("#btn01").click(function () {
var colorValue = $("#divId").css("background-color");
alert("colorValue = " + colorValue);
});
$("#btn02").click(function () {
$("#divId").css("background-color" , "green");
});
</script>jq operation attribute
Method
attr(name,[value]) Gets/sets the value of the attribute
prop(name,[value]) Gets/sets the value of the attribute (checked,selected)
Use JQ to manipulate DOM
API
val([value]) Get/set the corresponding value of the value attribute in the tag
text([value]) Get/set the text content of the element
html([value]) Get/set the tag body content of the element
val() and val(...)
<body>
<input type="text" value="hello" id="inputId"/> <br/>
<input type="submit" value="获得value" id="btn01" />
<input type="submit" value="设置value" id="btn02"/>
</body>
<script>
$("#btn01").click(function () {
var value = $("#inputId").val();
console.log(value);
});
$("#btn02").click(function () {
$("#inputId").val("balabalablabala");
});
</script>text() and html()
<body>
<p id="pid"></p><br/>
<input type="button" value="html(...)" id="btn01"/>
<input type="button" value="text(...)" id="btn02"/>
</body>
<script>
$("#btn01").click(function () {
$("#pid").html("<font color='red'>hello...html</font>");
});
$("#btn02").click(function () {
$("#pid").text("<font color = 'red'>hello...text</font>");//不支持标签
});
</script>JQ creation, insertion
API
$("A") creates an A element object
append(element) is added as the last child element, and the parent-child relationship between the two is
prepend(element) is added as the first child element, and the parent-child relationship is
appendTo(element) ) Added to the inner end of the parent element
prependTo(element) Added to the inner front of the parent element
before(element) Added to the front of the current element, between the two is a sibling relationship
after(element) Added to the back of the current element, the two sibling relationship
internal insertion
append a.apend(c) 将c插入到a的内部的后面
appendTo c.appendTo(a) 将c插入到a的内部的后面
<a>
...
<c></c>
</a> prepend a.prepend(c) 将c插入到a的内部的前面
prependTo c.prepend(a) 将c插入到a的内部的前面
<a>
<c></c>
...
</a>external insertion
after a.after(c)
<a></a><c></c>
before a.before(c)
<c><c><a></a>jq remove node
API
remove() Delete the specified element
empty() Clear all child elements of the specified element
JQ traversal
js way to traverse
for(var i = 0;i<element array.length;i++){ element array[i]; }
<script>
var array = [1,2,3,4,5];
for(var i = 0 ; i < array.length ; i++){
array[i];
}
</script>jq object method traversal
jquery object.each(function(index,element){})
<script>
var array = [1,2,3,4,5];
$(array).each(function (a,n) {
console.log("array[" +a+ "]="+n);
});
</script>jq global traversal
$.each(jquery,function(index,element){});
<script>
var array = [1,2,3,4,5];
$.each($(array),function (a,n) {
console.log(a,n);
})
</script>The new feature of jq3.0 for of statement traverses
for (variable of jquery object) { variable; }
for(n of $ (array)){
console.log(n);
}the case
Use JQuery to complete the page timing advertisement pop-up
Advertisement pops up 3s after entering the page, and hides after 3s
<body>
<div id="adDiv" style="width: 100%;height: 300px;display: none">
<img src="../src/ad.jpg" height="100%" width="100%"/>
</div>
</body>
<script>
setTimeout("showAd()",3000);
function showAd(){
var $adObj = $("#adDiv");
$adObj.show(3000,function () {
setTimeout("hideAd()",3000);
});
}
function hideAd(){
var $adObj = $("#adDiv");
$adObj.hide(3000);
}
</script>Use jquery to complete the interlaced color change of the table
Use a filter to match odd and even rows and set the background color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<table width="500px" align="center" border="1px">
<tr>
<td><input type="checkbox" id="all" /></td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" class="one"/></td>
<td>Mac</td>
<td>18800</td>
<td>10</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="one"/></td>
<td>Mac</td>
<td>18800</td>
<td>10</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="one"/></td>
<td>Mac</td>
<td>18800</td>
<td>10</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="one"/></td>
<td>Mac</td>
<td>18800</td>
<td>10</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="one"/></td>
<td>Mac</td>
<td>18800</td>
<td>10</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
</table>
</body>
<script>
$("tr:odd").css("backgroundColor","#ffb6c1");
$("tr:even").css("backgroundColor","#4f818d");
</script>
</html>Use jq to complete the checkbox effect
<script>
$("#all").click(function () {
$(".one").attr("checked",this.checked);
});
</script>Use jq to complete the table color change
<script>
var color;
$("tr:odd").css("backgroundColor","#ffb6c1");
$("tr:even").css("backgroundColor","#4f818d");
$("tr").mouseenter(function () {
color = $(this).css("backgroundColor");
$(this).css("backgroundColor","red");
});
$("tr").mouseout(function () {
$(this).css("backgroundColor",color);
})
$("#all").click(function () {
$(".one").attr("checked",this.checked);
});
</script>electronic clock
<body>
<span id="spanid">
</span>
</body>
<script>
setInterval("gettime()",1000)
function gettime() {
var data = new Date().toLocaleString();
$("#spanid").html(data);
}
</script>