Points:
- Setting elements and Content
- Element Property Manipulation
- Element style manipulation
- CSS methods
I. Setting elements and Content
1. Set and get HTML content in an element
<div id="test"> <h1>This is H1</h1></div>console.log($("#test").html()); <h1>This is H1</h1>
Get the current content before appending the content
$("#test").html($("#test""<span>span</span>")console.log($("#test").html()); // ThisH1</h1> <span>span</span>
2. Set and get text content in an element
console.log($("#test").text()); // This is H1$("#test").text("我要覆盖你");console.log($("#test").text()); // 我要覆盖你
3. Set up and get the contents of the form
console.log($("input").val()); // 按钮$("input").val("我是按钮");console.log($("input").val()); // 我是按钮
If you want to set the selected state of multiple options, such as a drop-down list, a radio check box, and so on, you can pass the operation through an array.
<select multiple="multiple"> <option value="op1">op1</option> <option value="op2">op2</option> <option value="op3">op3</option> <option value="op4">op4</option></select>$("select").val(["op1""op4"]); // 值为op1和op4的被选中
Second, Element attribute operation
<a href="###">体育</a>
1. Get Properties
console.log($("a").attr("href")); //###
2. Setting properties
$("a"). attr ("href","Http://www.baidu.com");//Set property valuesConsole.log ($ ("a"). attr ("href"));//Http://www.baidu.comProperty value can be an anonymous function//Index indicates the last index, default is 0//value indicates the last property value$("a"). attr ("href", function (index, value) { return "new version:"+ Index +1+" "+ value;}) Console.log ($ ("a"). attr ("href"));//New version: Http://www.baidu.com
3. Delete Attributes
$("a").removeAttr("href");console.log($("a").attr("href")); // undefined
Three, Element style operation
<divid="box">box</div>#box { 100px; 100px; background : red;}var box = $("#box");
1. Get style
console.log(box.css("width")); // 100px
If the acquired style needs to be evaluated, then an anonymous function can be transmitted to
box.css("width"function (index, value) { return (parseInt500"px";});
2. Set style
box.css("background""blue");
3. Get Multiple styles
var style = box.css(["width""height""background"]);for (varin style){ console.log(style[v]); // 100px 100px }
4. Set multiple styles that can be transmitted to an object parameter
box.css({ "font-size""100px", "background""orange"});
5. Traversing elements
function (attr, value) { ", " + value); ...});
6. Adding class Styles
#box { height: + px; width: + px; Border: 1px solid #ccc; }. Blue { background: blue;} . Green { background: green;}
Add Blue Class
$("#box").addClass("blue");
Delete Blue class
$("#box").removeClass("blue");
Toggle Style
$("#box").click(function () { $(this).toggleClass("blue");});
We can change the frequency of the switch.
var0;$("#box").click(function () { $(this).toggleClass("blue"30);});
Implementing a toggle between styles
$ ( "#box" ). Click (< Span class= "Hljs-keyword" >function () { $ ( this ). Toggleclass (function () { if ($ (this ). Hasclass ( "blue" )) {$ (this ). Removeclass ( blue" ); return "green" ; } else {$ (this ). Removeclass (); return "blue" ; } });});
Iv. CSS Methods
Get width
console.log($("#box").width()); // 100
Set width
$ ( "#box" ). Width (500 ); $ ( "#box" ). Width ( " 500pt "); //plus units, default px $ ( "#box" ). Width (function (index, value) { //descendants anonymous function, return setting value return value + 200 ; //Current value + $ });
Height () Gets the heights of the elements
Innerwidth () Gets the element width, including the padding padding
Innerheight () Gets the height of the element, including the inner margin padding
Outerwidth () Gets the element width, including border border and padding padding
Outerheight () Gets the height of the element, including the bounding rectangle border and the inner margin padding
Outerwidth (Ture) ibid. and includes margin
Outerheight (True) ibid., and contains margin
The above method of use and width () the same way, here no longer cumbersome
Offset () Gets the offset position of an element relative to the viewport
* {padding : 0; margin: 0;}#box{position: absolute; Height: + px; width: + px; Left: px; Top:px; Border: 1px solid #ccc;}//Gets the position of the element relative to the viewportConsole. Log($("#box"). Offset(). Left);//Console. Log($("#box"). Offset(). Top);////position () Gets the offset position of an element relative to the parent elementConsole. Log($("#box"). Position(). Left);///200, the parent element is the bodyConsole. Log($("#box"). Position(). Top);//scrolltop ()Gets the value of the vertical scroll barscrolltop (value)Set the value of the vertical scroll bar console. Log($ (window). scrolltop());//0$ (document). Click(function () {$ (window). scrolltop(0);//Click anywhere, top});
JQuery base DOM and CSS operations