$tools, methods, jQuery properties and CSS

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>

 

Keywords: Javascript JQuery css

Added by traffic on Thu, 10 Mar 2022 17:48:49 +0200