JQuery base DOM and CSS operations

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.