JQuery tutorial (from Beginner to Master)

[TOC]

JQuery object filtering and lookup

1. Object filtering

first()

var $li = $('ul>li');
// 1. The first li label under ul
// $li[0].style.backgroundColor = 'red';
$li.first().css('background-color'.'red');
Copy the code

last()

// 2. Last li label under ul
// $li[$li.length - 1].style.backgroundColor = 'red';
$li.last().css('background-color'.'red');
Copy the code

eq()

// 3. The second li label under UL
// $li[1].style.backgroundColor = 'red';
$li.eq(1).css('background-color'.'red');
Copy the code

filter()

// 4. The title attribute of the ul li tag is Hello
$li.filter('[title=hello]').css('background-color'.'red');
Copy the code

not()

// 5. The title attribute of the li tag under ul is not hello
// $li.filter('[title!=hello]').css('background-color', 'red');
$li.not('[title=hello]').css('background-color'.'red');
Copy the code

But the above writing method, will not have the title attribute of the Li element is also queried out, more in line with the problem writing method is as follows:

// $li.filter('[title]').filter('[title!=hello]').css('background-color', 'red');
// $li.filter('[title!=hello]').filter('[title]').css('background-color', 'red');
$li.filter('[title][title!=hello]').css('background-color'.'red');
Copy the code

has()

// 6. The li label under ul has a span label
$li.has('span').css('background-color'.'red');
Copy the code

HasClass (), is ()

// 7. Ul li class attribute box2
// if ($li.filter('[class=box2]').hasClass('box2')) {
// $li.filter('[class=box2]').css('background-color', 'red');
// }
if ($li.filter('[class=box2]').is('.box2')) {
    $li.filter('[class=box2]').css('background-color'.'red');
}
Copy the code

2, object search

children()

var $ul = $('ul');
// 1. The second span sublabel of the UL label
$ul.children('span:eq(1)').css('background-color'.'red');   
Copy the code

find()

// 2. The second SPAN descendant label of the UL label
$ul.find('span:eq(1)').css('background-color'.'red');
Copy the code

The parent (s), the offsetParent ()

// 3. Parent label of the UL label
$ul.parent().css('background-color'.'red');
Copy the code

// 3. Locate the parent label of the UL label
$ul.offsetParent().css('background-color'.'red');
Copy the code

Prev (), prevAll(), next(), nextAll()

// 4. The previous LI label of the LI label whose ID is cc
$('#cc').prev('li').css('background-color'.'red');
Copy the code

// 4. All li labels before the LI label whose id is cc
$('#cc').prevAll('li').css('background-color'.'red');
Copy the code

// 4. The last li label of the LI label whose ID is cc
$('#cc').next('li').css('background-color'.'red');
Copy the code

// 4. All li labels following the LI label whose id is cc
$('#cc').nextAll('li').css('background-color'.'red');
Copy the code

siblings()

// 6. All siblings of the li tag whose id is cc
$('#cc').siblings('li').css('background-color'.'red');
Copy the code

Exercise: Hobby selector

The HTML code

<form>What's your favorite sport?<input type="checkbox" id="checkedAllBox"/>All/none<br/>
    <input type="checkbox" name="items" value="Football"/>football<input type="checkbox" name="items" value="Basketball"/>basketball<input type="checkbox" name="items" value="Badminton"/>badminton<input type="checkbox" name="items" value="Table tennis"/>Table tennis<br/>
    <input type="button" id="checkedAllBtn" value="Future generations"/>
    <input type="button" id="checkedNoBtn" value="None at all"/>
    <input type="button" id="checkedRevBtn" value="The choice"/>
    <input type="button" id="sendBtn" value="Submit"/>
</form>
Copy the code

JQuery code

var $checkedAllBox = $('#checkedAllBox'); // ID selector
var $items = $(':checkbox[name=items]'); // Form selector, filter selector, intersection selector
// 1. Click 'Select all' : Select all hobbies
var $checkedAllBtn = $('#checkedAllBtn');
$checkedAllBtn.click(function () { / / click function
    $items.prop('checked'.true); // prop operation properties
    $checkedAllBox.prop('checked'.true);
});

// 2. Click 'None' : all hobbies are unchecked
var $checkedNoBtn = $('#checkedNoBtn');
$checkedNoBtn.click(function () {
    $items.prop('checked'.false);
    $checkedAllBox.prop('checked'.false);
});

// 3. Click 'Reverse selection' to change the selection status of all hobbies
var $checkedRevBtn = $('#checkedRevBtn');
$checkedRevBtn.click(function () {
    $items.each(function () { / / the each function
        this.checked = !this.checked;
    });
    $checkedAllBox.prop('checked', $items.not(':checked').length === 0); // not Filter method
});

// 4. Click 'Submit' : prompt for all submitted hobbies
var $sendBtn = $('#sendBtn');
$sendBtn.click(function () {
    var arr = [];
    $items.filter(':checked').each(function () { // filter Filter method
        arr.push(this.value); // Array push method
    });
    alert(arr.join(', ')); // Array join method
});

// 5. Click 'All/None' : Select all hobbies or none at all
var $checkedAllBox = $('#checkedAllBox');
$checkedAllBox.click(function () {
    $items.prop('checked'.this.checked);
});

// 6. When clicking on a hobby, update the selected status of 'All/None' if necessary
$items.click(function () {
    $checkedAllBox.prop('checked', $items.not(':checked').length === 0);
});
Copy the code

The effect