jQuery系列---【jQuery选择器】

$(document).ready()

// window.onload: 页面结构和资源加载成功后调用, $(document).ready(): 页面结构加载成功就调用,不用`等待资源加载成功
// window.onload 不能重复添加(会覆盖) $(document).ready() 可以重复添加
// window.onload 不能简写 $(document).ready() 可以简写 $(function())
window.onload = function () {
    console.log('window.onload--1');
}
$(document).ready(function () {
    console.log('$(document).ready()--1');
});
window.onload = function () {
    console.log('window.onload--2');
}
$(document).ready(function () {
    console.log('$(document).ready()--2');
});
$(function () {
    console.log('$(document).ready()--3');
});

jQuery对象和原生对象转换

• 通过原生js获取到的是原生的js对象,可以直接调用元素的方法和属性

• jQuery获取到的是jQuery对象,需要使用jQuery的方法

• 可以使用[index]或者get(index)把jQuery对象转成原生对象, 通过$()把原生对象转成jQuery对象.

// 可以使用[index]或者get(index)把jQuery对象转成原生对象, 通过$()把原生对象转成jQuery对象.
console.log($('.box')[0]);
console.log($('.box').get(0));
$('.box')[0].style.width = '500px';
$('.box').get(0).style.height = '300px';
// console.log($(box)); // n.fn.init [div.box, context: div.box]
// $(box).style.width = '100px'; // Uncaught TypeError: Cannot set property 'width' of undefined

jQuery选择器

• 基本选择器: id选择器, class选择器, 标签选择器

// 基本选择器: id选择器, class选择器, 标签选择器
// $(选择器)
console.log($('div'));
console.log($('.content'));
console.log($('#idbox'));
​
// window document this在选择时不用加引号
console.log($(window));
console.log($(document));
console.log($(this));

• 层次选择器

console.log($('div p')); // div中后代元素p
console.log($('div > p')); // div直接子元素p
console.log($('div + p')); // div后面紧邻的兄弟元素p
console.log($('div ~ p')); // div后面所有的兄弟元素p

• 过滤选择器(基本)

$('li:first').css('background', 'red'); // 第一个
$('li:last').css('background', 'red'); // 最后一个
$('li:even').css('background', 'red'); // 下标偶数
$('li:odd').css('background', 'blue'); // 下标奇数
$('li:lt(3)').css('background', 'red'); // 下标小于3
$('li:gt(3)').css('background', 'blue'); // 下标大于3
$('li:eq(3)').css('background', 'green'); // 下标等于3
$('li').eq(3).css('background', 'green'); // 下标等于3
$('li:not(.haha)').css('background', 'blue'); // 排除类名为haha

• 过滤选择器（内容）

$('li:contains(好)').css('background', 'red'); // 内容包含'好'的li
$('li:has(span)').css('background', 'red'); // 内部有span标签的li
$('li:empty').css('background', 'blue'); // 没有内容或者文字的li
$('li:parent').css('background', 'blue'); // 有内容的li

• 属性过滤选择器

$('li[title]').css('background', 'red'); // 有title属性的li
$('li[title=web]').css('background', 'red'); // 有title属性并且title属性值是web的li
$('li[title!=web]').css('background', 'red'); // title值不是web的li
$('li[title^=web]').css('background', 'red'); // title属性值以web开头的li
$('li[title$=web]').css('background', 'red'); // title属性值以web结尾的li
$('li[title*=i]').css('background', 'red'); // title属性值包含i的li

• 表单选择器

console.log($(':input')); // n.fn.init(9)
console.log($(':text')); // n.fn.init(1)
console.log($(':password')); // n.fn.init(1)
console.log($(':radio')); // n.fn.init(2)
console.log($(':checkbox')); // n.fn.init(2)
console.log($(':button')); // n.fn.init(1)
console.log($(':submit')); // n.fn.init(1)
console.log($(':reset')); // n.fn.init(1)