jQuery Introduction
jQuery is a lightweight JS library, very simple to use;
The core jQuery is a selector for acquiring the page elements;
jQuery provides a number of highly effective method that dramatically improves the speed of development;
jQuery selector
- JQuery selector page elements required for the selected operation
- Syntax 1: jQuery (selector expression)
- Syntax 2: $ (selector expression)
The basic selector
| grammar | Explanation |
|---|---|
| $("#id") | Object ID selector, elements designated Id |
| $ ( "Tag") | Element selector, select the specified tag name selector |
| $(".class") | Class selector, select the elements with the specified css class |
| $("S1,S2,SN") | Selector combination, the combination of the elements |
Laminated selector
| grammar | Explanation |
|---|---|
| $("ancestor descendant") | Descendant selectors |
| $("ancestor>descendant") | Child selector |
| $("prev~siblings") | Brothers selector |
Attribute selectors
| grammar | Explanation |
|---|---|
| $("selector[attribute=value]") | Selected attribute value is equal to a specific value component |
| $("selector[attribute^=value]") | Select the property value begins with a value of components |
| $("selector[attribute$=value]") | Component selected attribute values of a certain value at the end |
| $("selector[attribute*=value]") | Selected attribute value contains a value component |
A position selector (not used)
| grammar | Explanation |
|---|---|
| $("selector:first") | Get the first element |
| $("selector:last") | Gets the last element |
| $("selector:even") | Get element even positions (starting from 0) |
| $("selector:odd") | Get the odd positions of elements (starting from 0) |
| $("selector:eq(n)") | Gets the position of the element (starting from 0) |
Form selector (not used)
| grammar | Explanation |
|---|---|
| $("selector:input") | All input elements |
| $("selector:text") | Get the text box |
| $("selector:password") | Obtain the password box |
| $("selector:submit") | Get the submit button |
| $("selector:reset") | Get reset button |
| ... |
Operating element attributes
- attr (name | properties | key) - Gets or sets the element properties
$("a[href*='163']").attr("href", "http://www.163.com");will Netease Netease mail address to home address - removeAttr (name) - removable element attributes
$("a").removeAttr("href");all a href attribute tag removed
Operating elements of CSS styles
- css () - Gets or sets the style property matching elements
$("a").css("color", "red");all color style label to a red
$("a").css({"color":"red","font-weight":"bold"});incoming JSON object set multiple property values - addClass () - Add specified for each class name matched elements
$("li").addClass("highlight myclass");to increase two css class label li - removeClass () - Delete all or all of the specified class from the matched elements
$("p").removeClass("myclass");to remove p type tag myclass
Setting element content
- val () - Gets or sets the value of the entry
$("input[name='username']").val();to obtain the value of the text box
$("input[name='username']").val("请输入姓名");the value of the text box - text () - Gets or sets the plain text element
$("span").text("<b>你好啊！</b>");content is set to span <b> Hello </ b> (html tag text escape) - html () - Gets or sets the HTML elements inside
$("span").html("<b>你好啊！</b>");the content span is set to Hello! (Html tag text without escaping)
jQuery event handler method
- on ( "click", function) - bind the click event for the selected page elements
- click (function) - is shorthand for binding event
- It provides event handling method parameter contains information about the event
jQuery common event
| Mouse Events | Keyboard Events | Form events | Document / window events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| mouseover |
Examples
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery练习</title>
<style type="text/css">
.div1 {
float: left;
width: 50px;
line-height: 30px;
background-color: lightgray;
margin-left: 10px;
text-align: center;
vertical-align: middle;
}
.div2 {
width: 300px;
height: 300px;
border: solid gray 1px;
margin-top: 60px;
color: red;
}
</style>
</head>
<body>
<h2>请选择背景颜色</h2>
<div>
<div id="blue" class="div1">蓝色</div>
<div id="green" class="div1">绿色</div>
</div>
<div class="div2" id="bg"></div>
<div>
输入颜色首字母： <input type="text" name="color">
</div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
alert("欢迎来到设置颜色的页面");
$("#blue").click(function(){
$("#bg").css("background-color", "blue");
$("#bg").text("蓝色背景");
});
$("#green").click(function(){
$("#bg").css({"background-color":"green","font-weight":"bold"});
$("#bg").text("绿色背景");
});
$("input[type='text']").keypress(function(event){
if(event.keyCode == 66){
$("#bg").css("background-color", "blue");
$("#bg").text("");
}
if(event.keyCode == 71){
$("#bg").css("background-color","green");
$("#bg").text("");
}
});
</script>
</body>
</html>