JQuery tutorial (from Beginner to Master)

[TOC]

JQuery tools, Properties, CSS

1. JQuery tool methods

However, we don’t have many tools in common

$.each()

// 1, $.each() : iterates through a group or object
var obj = {
    name: 'Tom'.setName: function (name) {
        this.name = name;
    }
}
$.each(obj, function (key, value) {
    console.log(key, value); ƒ (name) {}
});
Copy the code

$.trim()

// 2, $.trim() : removes Spaces around characters
var str = ' ddd ';
console.log($.trim(str)); // ddd
Copy the code

$.type()

// 3, $.type(obj) : get the data type
console.log($.type($), $.type($())); // function object
Copy the code

$.isArray()

// 4, $.isarray (obj) : check whether it is an array
console.log($.isArray($('body')), $.isArray([])); // false true
Copy the code

$.isFunction()

$.isfunction (obj) : $.isfunction (obj)
console.log($.isFunction($), $.isFunction($())); // true false
Copy the code

$.isNumberic()

// 6, $.isnumberic (obj) : check whether it is a number
console.log($.isNumeric('a'), $.isNumeric('2'), $.isNumeric(2)); // false true true
Copy the code

$.parseJSON()

$.parsejson (json) : parseJSON characters into js objects/arrays
var jsonObj = '{"name":"Tom", "age": 18}';
console.log($.parseJSON(jsonObj)); // {name: "Tom", age: 18}
var jsonArr = '[{"name":"Tom", "age": 18}, {"name":"Jack", "age": 28}]';
console.log($.parseJSON(jsonArr)); / / (2) ({...}, {...})
Copy the code

2, practice: multi-tab click switch

The HTML code

<ul id="tab">
    <li id="tab1" value="1">10 yuan package</li>
    <li id="tab2" value="2">30 yuan package</li>
    <li id="tab3" value="3">50 yuan monthly</li>
</ul>
<div id="container">
    <div id="content1">10 yuan package details:<br>Dial 100 minutes within the monthly plan, and 2 yuan/minute for the excess part</div>
    <div id="content2" style="display:none">30 yuan package details:<br>Dial 300 minutes within the monthly plan, 1.5 yuan/minute for the excess part</div>
    <div id="content3" style="display:none">50 yuan per month<br>Unlimited monthly heart play</div>
</div>
Copy the code

JQuery code

var $containers = $('#container>div');
var curIndex = 0;
$('#tab>li').click(function () { // implicit traversal
    // Hide last time
    $containers[curIndex].style.display = 'none';
    // Display the current
    curIndex = $(this).index();
    $containers[curIndex].style.display = 'block';
});
Copy the code

3. JQuery operation properties

Attr (), removeAttr ()

//1. Read the title attribute of the first div
console.log($('div:first').attr('title')); // one
//2. Set name to all divs (value = atguigu)
$('div').attr('name'.'atguigu');
//3. Remove the title attribute from all divs
$('div').removeAttr('title');
// set class='guiguClass' for all divs.
$('div').attr('class'.'guiguClass');
Copy the code

The addClass () and removeClass ()

// add class=' ABC 'to all divs
$('div').addClass('abc');
//6. Remove the guiguClass class for all divs
$('div').removeClass('guiguClass');
Copy the code

The HTML (), val ()

//7. Get the body text of the last li tag
console.log($('ul>li:last').html()); // <span>BBBBB</span>
// set the first li tag body to "
 MMMMMMM 
"
$('ul>li:first').html('<h1>mmmmmmmmm</h1>');
//9. Get the value in the input box
console.log($(':text').val()); // guiguClass
//10. Set the input field to atguigu
$(':text').val('atguigu');
Copy the code

Prop (), removeProp ()

//11. Click 'Select All' and press Leave to select all
var $checkbox = $(':checkbox');
$('button:first').click(function () {
    $checkbox.prop('checked'.true);
});
//12. Click 'Select None' and press leave to select none
$('button:last').click(function () {
    $checkbox.prop("checked".false);
});
Copy the code

Attr () : works with non-Boolean properties prop() : works with Boolean properties

4. JQuery operates the CSS

css()

// 1. Get the color of the first p tag
console.log($('p:first').css('color')); // rgb(0, 0, 255);
// 2. Set the text color of all p labels to red
$('p').css('color'.'red');
// 3. Set the font color (#ffee11), background (blue), width (300px), height (30px) for the second p
$('p:eq(1)').css({
    color: '#ffee11'.backgroundColor: 'blue'.width: 300.height: 30
});
Copy the code

Offset and the position

1. Click btn1
$('#btn1').click(function () {
    // Prints the position of div1 relative to the upper left corner of the page
    var offset1 = $('.div1').offset();
    console.log(offset1.left, offset1.top); / / 10 20
    // Prints the position of div2 relative to the upper left corner of the page
    var offset2 = $('.div2').offset();
    console.log(offset2.left, offset2.top); / / 10, 70

    // Prints the position of div1 relative to the upper-left corner of the parent element
    var position1 = $('.div1').position();
    console.log(position1.left, position1.top); / / 10 20
    // Prints the position of div2 relative to the upper-left corner of the parent element
    var position2 = $('.div2').position();
    console.log(position2.left, position2.top); / / 0 to 50
});

// click btn2
$('#btn2').click(function () {
    // Set the position of div2 relative to the upper-left corner of the page
    $('.div2').offset({left: 0.top: 0});
});
Copy the code

ScrollTop and scrollLeft

// 1. Get the coordinates of the div or page scroll bar
$('#btn1').click(function () {
    console.log($('div').scrollTop()); / / 400
    console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()); / / 200
});
// 2. Scroll the div or page's scroll bar to the specified position
$('#btn2').click(function () {$('div').scrollTop(1000);
    $('html,body').scrollTop(100);
});
Copy the code

Element size

1. Content size

• height():height
• width():width

2. Internal dimensions

• innerHeight():height + padding
• innerwidth():width + padding

3. External dimensions

• outerHeight(false/true):height + padding + borderIf it istrue, plusmargin
• outerwidth(false/true):width + padding + borderIf it istrue, plusmargin

var $div = $('div');
console.log($div.height(), $div.width()); / / 150, 100
console.log($div.innerHeight(), $div.innerWidth()); / / 170 120
console.log($div.outerHeight(), $div.outerWidth()); / / 190 140
console.log($div.outerHeight(true), $div.outerWidth(true)); / / 210 160
Copy the code