Individual Learning Notes
1.JQuery Content Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Content selector</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//:contains(text) Effect:Find the specified element that contains the specified text content
var $div1 = $("div:contains('div')");
console.log($div1);
//:empty Effect:Find no text content,There are no child elements specified
var $div2 = $("div:empty");
console.log($div2);
//:has(selector) Effect:Find the specified element that contains the specified child element
var $div3 = $("div:has('p')");
console.log($div3);
//:parent Effect:Find the specified element that contains the specified text content or child elements
var $div4 = $("div:parent");
console.log($div4);
});
</script>
<style>
div{
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
}
</style>
</head>
<body>
<div></div>
<div>div 1 Number</div>
<div>div 2 Number</div>
<div><p></p></div>
<div><span></span></div>
</body>
</html>
2. Attributes and Attribute Nodes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attributes and Attribute Nodes</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/*
What are attributes
A variable on an object is an attribute.
How to manipulate attributes
Object. Property name = value
Object. Property name
Object ['Property Name']= Value
Object ['Property Name']
What is attribute node
<span name="mySpan"></span>
The attribute added to the HTML tag is the attribute node.
When the browser finds the span tag, it expands to see the properties.
The content in attributes attribute is attribute node
How to manipulate attribute nodes using get and set methods
var span = document.getElementsByTagName('span')[0];
span.setAttribute("name","newSpan");
console.log(span.getAttribute("name"));
Differences between attributes and attribute nodes
Any element has attributes, but only DOM elements have attribute nodes
*/
var span = document.getElementsByTagName('span')[0];
span.setAttribute("name","newSpan");
console.log(span.getAttribute("name"));
});
</script>
</head>
<body>
<span name="mySpan"></span>
</body>
</html>
3.JQuery-attr method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-attr Method</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* Gets or sets or adds the value of the attribute node
*
* Pass a parameter: Get the value of the specified attribute node, no matter how many elements are found, only the value of the first attribute node is returned.
* Pass two parameters: if it exists, change it, add it if it doesn't exist. Set as many elements as you have.
*/
console.log($('span').attr("class", "newSpan1"));
console.log($('span').attr("new", "haha"));
console.log($('span').attr("new"));
/**
* Delete attribute nodes: Delete attribute nodes for all found elements
* If you want to delete multiple attribute nodes, just hit a space.
*/
$('span').removeAttr("class new");
console.log($('span'));
});
</script>
</head>
<body>
<span class="span1" name="First span"></span>
<span class="span2" name="The second span"></span>
</body>
</html>
4.JQuery-prop method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-prop Method</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//and attr The method is basically the same.
$('span').eq(0).prop("test","moti");
console.log($("span").prop("test"));
$('span').removeProp("class");
console.log($('span'));
/*
It is officially recommended that attribute nodes with true and false attributes should be operated on.
For example, CheckBox,selected, or disabled uses prop.
Other times attr()
*/
console.log($('input').prop("checked"));//Return true and false
console.log($('input').attr("checked"));//Return checked and undefined
});
</script>
</head>
<body>
<span class="span1" name="First span"></span>
<span class="span2" name="The second span"></span>
<input type="checkbox" checked>
</body>
</html>
5.attr and prop method exercises
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr and prop Method practice</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//to button Add Click Events
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
//Get the contents of the input box
var input = document.getElementsByTagName("input")[0];
var text = input.value;
//modify img Of src attribute
$('img').attr("src",text);//Recommend
// $('img').prop("src",text);
}
});
</script>
</head>
<img>
<input type="text"> <button>Switch pictures</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super">
</body>
</html>
6.JQuery related class operation method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Operating methods of related classes</title>
<script src="jquery-1.12.4.js"></script>
<style>
.class1{
background: rebeccapurple;
width: 200px;
height: 10px;
}
.class2{
background: green;
height: 100px;
}
</style>
<script>
$(function () {
var btn0 = document.getElementsByTagName("button")[0];
var btn1 = document.getElementsByTagName("button")[1];
var btn2 = document.getElementsByTagName("button")[2];
/**
* addClass:Add a class, if you want to add more than one class name separated by spaces
*/
btn0.onclick = function () {
$("div").addClass("class2 class1");
}
/**
* removeClass:Delete a class. If you want to delete more than one class name, space is used between the class names.
*/
btn1.onclick = function () {
$("div").removeClass("class2");
}
/**
* toggleClass:Switch classes, delete them if you have them, add them if you don't.
*/
btn2.onclick = function () {
$("div").toggleClass("class2 class1");
}
});
</script>
</head>
<body>
<button>Add class</button>
<button>Delete class</button>
<button>Switching class</button>
<div></div>
</body>
</html>
7.JQuery Text Value Related Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Method of Text Value Dependence</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 = document.getElementsByTagName("button")[0];
var btn1 = document.getElementsByTagName("button")[1];
var btn2 = document.getElementsByTagName("button")[2];
var btn3 = document.getElementsByTagName("button")[3];
var btn4 = document.getElementsByTagName("button")[4];
var btn5 = document.getElementsByTagName("button")[5];
btn0.onclick = function () {
$("div").html("<p>I am a paragraph.<span>I am span</span></p>")
};
btn1.onclick = function () {
console.log($("div").html());
};
btn2.onclick = function () {
$("div").text("I am the text content");
};
btn3.onclick = function () {
console.log($("div").text());
};
btn4.onclick = function () {
$("input").val("Please enter the content");
};
btn5.onclick = function () {
console.log($("input").val());
};
});
</script>
</head>
<body>
<button>Set up html</button>
<button>Obtain html</button>
<button>Set up text</button>
<button>Obtain text</button>
<button>Set up value</button>
<button>Obtain value</button>
<div></div>
<input type="text">
</body>
</html>
8.jQuery's Method of Operating CSS Styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery operation CSS Style approach</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* Set by stages
*/
// $("div").css("width","100px");
// $("div").css("height","100px");
// $("div").css("background","green");
/**
* Chain setup
* Note: If the chain operation is greater than three steps, it is recommended to separate it.
*/
$("div").css("width","100px").css("height","100px").css("background","red");
/**
* Batch setup
* (Recommended)
*/
$("div").css({
width:"100px",
height:"100px",
background:"blue"
});
/**
* Get CSS style values
*/
console.log($("div").css("background"));
});
</script>
</head>
<body>
<div></div>
</body>
</html>
9.JQuery Position and Size Operations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Method of Operating Position and Dimension</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
border: 20px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 =document.getElementsByTagName("button")[0];
var btn1 =document.getElementsByTagName("button")[1];
/**
* Interception and acquisition
*/
btn0.onclick = function () {
//Get the width of the element
console.log("father Width:",$(".father").width());
//Obtaining the offset of element distance window
console.log("son Left offset of distance window",$(".son").offset().left);
//Obtaining the offset of element distance location
console.log("son Left offset from parent element",$(".son").position().left);
};
/**
* Monitor settings
*/
btn1.onclick = function () {
//Set the width of the element
$(".father").width("500px")
//Set the offset of the element distance window
$(".son").offset({
top:40
});
//Be careful position Method can only get settings that cannot be set,have access to css Method setting
$(".son").css({
left:"10px"
});
};
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>Obtain</button>
<button>Set up</button>
</body>
</html>
10.JQuery-scrollTop Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-scrollTop method</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
width: 100px;
height: 200px;
border: 2px solid #000;
overflow: auto;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 =document.getElementsByTagName("button")[0];
var btn1 =document.getElementsByTagName("button")[1];
/**
* Monitoring acquisition
*/
btn0.onclick = function () {
// Get the offset of element scroll
console.log("scroll's div scrolling offset:", $(". scroll").scrollTop());
// To get the offset of the entire page scroll, in order to ensure browser compatibility, the following writing is required
console.log("whole page scroll offset:", $("body"). scrollTop ()+ $("html"). scrollTop ());
};
/**
* Monitoring settings
*/
btn1.onclick = function () {
// Set the offset of element scroll
$(".scroll").scrollTop(200);
// To ensure browser compatibility, you need to follow the following instructions to set the offset of the entire web page
$("html,body").scrollTop(300);
};
});
</script>
</head>
<body>
<div class="scroll">
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty. I'm Motty.
</div>
<button>Get </button>
<button>Settings </button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>