1, What exactly is the $symbol?
$is the attribute defined for the window object in jQuery
$and jQuery can be interchanged when used. In fact, it is a function, which comes from the jQuery library
jQuery and $are used as an attribute of window
window.jQuery = window.$ = jQuery;
Object.prototype.toString.call($) can know that $is also a function
There is a basic skeleton} self executing function in the jQuery file (called by yourself after definition)
$(function(){})
$is equivalent to jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// What exactly is the $symbol?
// ------"Is actually a function, which comes from the jQuery library
// window.jQuery = window.$ = jQuery;
// jQuery takes $and window as an attribute
// jQuery library ----- self executing function (called by yourself after definition)
// $jQuery is equivalent
(function(){
alert(123)
}())
// The effect is different when parameters are passed.
// $(function() {}) entry function
// $("") selector / create a label
// $(dom object) js -- "JQury"
// $(function(){})
// jQuery(function(){})
// Judgment type [object Function]
console.log(Object.prototype.toString.call($))
console.log(window.jQuery === window.$) //true
console.log(jQuery === $) //true
// $is the attribute defined for the window object in jQuery
// window.jQuery = window.$ = jQuery;
// Object.prototype.toString.call($) can know that $is also a function
// There is a basic skeleton self executing function in the jQuery file
// $(function(){})
// $and jQuery can be interchanged when used
</script>
</head>
<body>
</body>
</html>
2, Exchange of dom object and jQuery object in js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.obox {
width: 100px;
height: 100px;
border: 1px solid aqua;
}
</style>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* Non inline style acquisition method
*/
function getStyle(obj, name) { //obj: which tag to operate on name: the attribute of the tag
if (obj.currentStyle) { //Compatible with IE
return obj.currentStyle[name];
} else { //Compatible with non IE browsers - Google, Firefox, etc
return getComputedStyle(obj, false)[name];
}
}
// Exchange of dom object and jQuery object in js
window.onload = function() {
// Can I use jQuery? sure
// Primitive js obtains elements through selectors
var btn = document.querySelector('button');
console.log(btn)
// console.log(getStyle(btn,'width'))
// Convert the original dom object jQuery object through $()
// console.log(btn.html());html()--innerHtml
console.log($(btn).html())
var $btn = $("button");
console.log($btn)
// console.log(getStyle($btn,'width'))
// Set jQuery object ---- dom object of js
// 1. The label obtained by subscript jQuery is an array
console.log(getStyle($btn[0], 'width'))
// 2. Through get method
console.log(getStyle($btn.get[0], 'width'))
}
</script>
</head>
<body>
<div class="obox">
</div>
<button type="button">Click to set the text content</button>
</body>
</html>
3, Use of tools and methods
1.$.each(): traversing arrays, objects, and data in object arrays
2.$.trim(): remove spaces on both sides of the string
3.$.type(obj): get the type of data
4.$.isArray(obj): judge whether it is an array
5.$.isFunction(obj): judge whether it is a function
6.$.parseJSON(obj): parse json strings and convert them into js objects / arrays
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- jQuery library -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
// Use of tools and methods
// 1.$.each(): traversing arrays, objects, and data in object arrays
// (consistent with the for loop in js)
// Define an array to hold data
var arr = ["yiyi","erer","snasna","sisi"];
console.log(typeof(arr))
// index subscript
// name value
$.each(arr,function(index,name)){
console.log(arr[index])
}
console.log("-------------")
// The attribute definitions in the object are defined in the form of Map key value pairs
var student = {"name":"zhangsan","sex":"nv","age":18};
console.log(typeof(student))
// each method traverses the object
// Name attribute name
// Value attribute value
$.each(student,function(name,value){
console.log(name,value);
})
console.log("-------------")
// Definition of object array
var students =[
{"name":"zhangsan1","sex":"nv","age":18},
{"name":"zhangsan2","sex":"nv","age":18},
{"name":"zhangsan3","sex":"nv","age":18},
{"name":"zhangsan4","sex":"nv","age":18}
];
// ergodic
$.each(students,function(index,obj){
console.log(index,obj);
$.each(obj,function(name,value){
console.log(name,value);
});
});
console.log("-------------")
// 2.$.trim(): remove spaces on both sides of the string
var str = " aksjhcd ";
// jQuery
console.log(str.length);
// js
console.log($.trim(str).length);
// 3.$.type(obj): get the type of data
// Same as typeof in js
console.log($.type(arr));//array
console.log($.type(student));//obj
console.log($.type(student));//obj
// 4.$.isArray(obj): judge whether it is an array
console.log($.isArray(student));
console.log($.isArray(arr));
// 5.$.isFunction(obj): judge whether it is a function
console.log($.isFunction(getName));
// 6.$.parseJSON(obj): parse json strings and convert them into js objects / arrays
var stu =" {\"name\":\"zhangsan4\",\"sex\":\"nv\",\"age\":18}";
console.log($.type(stu));
var jsonStu = $.parseJSON(stu);
console.log($.type(jsonStu));
$.each(jsonStu,function(name,value){
console.log(name,value)
});
</script>
</body>
</html>
IV. jQuery attribute
1.attr(): get the value of a tag attribute or set the value of a tag attribute
2.removeAttr(): deletes a tag attribute
3.addClass(): add a class attribute value to a tag
4.removeClass(): deletes the class attribute value of a tag
5.prop(): similar to attr(), the difference is that prop is used when the attribute value is of Boolean type, such as multiple selection
6.html(): get the content of a tag body (Note: the tag body can contain sub tags)
7.text(): get the content of a tag body (Note: the tag body cannot contain sub tags)
8.val(): the main user obtains / sets the value of the input box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.sb{
/* border: 10px solid blueviolet; */
background-color: yellow;
}
.obox2{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.sb2{
background-color: aquamarine;
}
</style>
<!-- jQuery library -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- jQuery Property and style setting and acquisition in -->
<hr >
<h2>1.attr(): Gets or sets the value of a tag property
Note: you can set the properties of form elements, but you cannot get</h2>
<div id="odiv" style="width: 100px;height: 100px;background-color: #00FFFF;">
</div>
<input type="text" id="inputs" value="" />
<button type="button" id="obtn1">Click Get</button>
<button type="button" id="obtn2">Click settings</button>
<button type="button" id="obtn3">Click settings input</button>
<script type="text/javascript">
$("#obtn1").click(function(){
alert($("#odiv")).attr("id");
})
$("#obtn2").click(function(){
$("#odiv").attr("name","demo")
})
$("#obtn3").click(function(){
// $("#inputs").attr("name","demo2")
alert($("#inputs").attr("value"))
})
</script>
<h2>2.removeAttr(): Delete a label attribute
Note: remove the entire attribute</h2>
<div name="sb" id="ok">
</div>
<button type="button" id="obtn4">remove name attribute</button>
<script type="text/javascript">
$("#obtn4").click(function(){
$("#ok").removeAttr("name");
})
</script>
<h2>3.addClass(): Add a label class Attribute value
Note: if there is on the label class Continue to use addClass The style is superimposed after
<br>
4.removeClass():Delete a label class Attribute value
</h2>
<div id="odiv2">
</div>
<button type="button" id="obtn5">Add style</button>
<button type="button" id="obtn6">Remove style</button>
<script type="text/javascript">
$("#obtn5").click(function(){
$("#odiv2").addClass("obox2");
})
$("#obtn6").click(function(){
$("#odiv2").removeClass("sb");
})
</script>
<h2>
5.prop():and attr()Similar, the difference is prop The value used for the attribute is Boolean Type, such as multiple selection(Specifically used to get and set form elements)
</h2>
<input type="text" name="sb" id="one"/>
<button type="button" class="mybtn">Click settings</button>
<script type="text/javascript">
// Get the name attribute or value attribute
$(".mybtn").click(function(){
$("#one").prop("name","lisi")
$("#one").prop("value","lisi")
})
</script>
<h2>
6.html():Get the content of a label body (Note: the label body can contain sub labels)
7.text(): Get the content of a label body(Note: the label body cannot contain child labels)
8.val(): Primary user acquisition/Set the value of the input box
</h2>
<div id="demo1">
study hard
<div>
Happy everyday
</div>
</div>
<input value="123" type="text" id="demo2" />
<script type="text/javascript">
console.log($('#demo1').html());
console.log($('#demo1').text());
// val() the result of getting non form elements is null
console.log($('#demo1').val());
// Form Elements
console.log($('#demo2').val());
// The form element is empty through html()
console.log($('#demo2').html());
// The result of the form element passing through text() is empty
console.log($('#demo2').text());
</script>
<hr >
</body>
</html>
5, Table interlaced color
< H2 > Case: change color between rows in the table</h2>
<table border="1" width="100%" height="300px">
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
</table>
<script type="text/javascript">
$("table tr:even").addClass("sb");
$("table tr:odd").addClass("sb2");
</script>
<hr >
6, Select all and deselect all
< H2 > select all</h2>
< button type = "button" id = "all" > select all < / button >
< button type = "button" id = "qxall" > Deselect all < / button >
<input type="checkbox" value="1" />1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input type="checkbox" value="4" />4
<input type="checkbox" value="5" />5
<script type="text/javascript">
$("#all").click(function(){
/ / get all check boxes
$("input:checkbox").each(function(){
// console.log($(this).val())
$(this).prop("checked",true)
})
})
$("#qxall").click(function(){
/ / get all check boxes
$("input:checkbox").each(function(){
// console.log($(this).val())
$(this).prop("checked",false)
})
})
</script>
VII. CSS
1.css(): sets the css style of the label
Get style value: css("style name")
Set a single style: CSS (style name, style value)
Set multiple styles: css({style name: style value, style name: style value})
2. position
offset(): relative position to the whole large container
position(): the relative position relative to the parent container
scrollXX
scrollTop(): the distance from the scroll bar to the top
3. size
Content size
Internal dimensions
External dimensions
Note: the parameter is true, plus margin
width(): container width
height(): container height
innerWidth(): width+padding
innerHeight(): height+padding
outerWidth():width+padding+border
outerHeight():height+padding+border
css code testing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#odiv{
width: 100px;
height: 100px;
background-color: #00FFFF;
position: absolute;
left: 200px;
top:100px;
border: 10px solid khaki;
}
.box{
position: relative;
width: 50px;
height: 50px;
background-color: #FAEBD7;
left: 20px;
top:20px;
}
</style>
<!-- jQuery library -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
for(var i=1;i<2000;i++){
document.write("<br />")
}
</script>
<div id="odiv">
<div class="obox">
</div>
</div>
<script type="text/javascript">
var $odiv = $("#odiv");
console.log($odiv.offset().left);
console.log($odiv.offset().top);
var $obox = $("#obox");
console.log($obox.position().left);
console.log($obox.position().top);
window.onsroll = function(){
console.log("Rolling");
}
$(window).scroll(function(){
console.log($(this).scrollTop())
})
console.log($odiv.width());
// width+padding
console.log($odiv.innerWidth());
// width+padding+border
console.log($odiv.outWidth());
</script>
</body>
</html>