JavaScript大杂烩14 - 使用JQuery(上)

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

var domObj = document.getElementById(‘testDiv‘);
var jQueryObj = $(domObj);

var domObj = $(‘#testDiv‘)[0];
var domObj = $("#testDiv").get(0);

$("#testDiv").each(function() { alert(this); });

$(selector).action(parameters);

// 基础选择器
$(‘#testDiv‘) // 选择id为testDiv的元素，一般id在整个页面是唯一的
$(‘p‘) // 选择页面中所有的p元素
$(‘.big‘) // 选择页面中所有的CSS类为big的元素
// 选择器的与或关系
$(‘.big,p‘) // 选择页面中所有CSS类为big的元素和所有的p元素
$(‘p#testDiv‘) // 选择页面中所有的CSS类为big的p元素
// 层次选择器
$(‘form input‘) // 选择页面中所有的form元素下面的所有的input元素
$(‘form>input‘) // 选择页面中所有的form元素下面直接属于form的input元素
$(‘#name+img‘) // 选择页面中id为name的元素后面紧跟着的img元素
$(‘#name~img‘) // 选择页面中id为name的元素后面所有的img元素
// 各种条件的过滤器：索引值，内容过滤，属性过滤，子元素过滤
$(‘tr:first‘), $(‘tr:last‘) // 选择第一行/最后一行表格
$(‘input:not(:checked)‘) // 选择页面中没有被checked的input，not后面的参数可以是任意的选择器
$(‘tr:even‘), $(‘tr:odd‘) // 偶数行/奇数行
$(‘tr:eq(1)‘),$(‘tr:gt(1)‘), $(‘tr:lt(1)‘) // 满足条件的第二行/第二行后面的/第二行前面的
$(‘:header‘) // 所有h1, h2, h3元素
$(‘div:not(:animated)‘) // 所有没有在执行动画效果的div
$("div:contains(‘Name‘)") // 所有内容中含有Name字符串的div
$(‘div:has(p)‘) // 所有含有p元素的div
$(‘tr:hidden‘), $(‘tr:visible‘) // 隐藏/显示的行
// 所有有id属性的div/id值为name的div/id值不为name的div
$(‘div[id]‘), $("div[id=‘name‘]"), $("div[id!=‘name‘]")
// 所有id属性值以name开头/结尾/包含name的div
$("div[id^=‘name‘]"), $("div[id$=‘name‘]"), $("div[id*=‘name‘]")
// 满足多个属性条件的div
$("div[id=‘name‘][name$=‘man‘]")
// 在每个ul中查找第2个li，nth-child后面的参数可以是even, odd, index值, 倍数如3n, 3n+1等等。
// 注意这个参数是从1开始的，而eq()是从0开始的。
$(‘ul li:nth-child(2)‘)
// 在每个ul的子元素中中查找第一个/最后一个li
$(‘ul li:first-child‘), $(‘ul li:last-child‘)
 
// 表单选择器与过滤器：
// 选择所有的input/text/password...
$(‘:input‘), $(‘:text‘), $(‘:password‘), $(‘:radio‘), $(‘:checkbox‘)
$(‘:button‘), $(‘:submit‘), $(‘:image‘), $(‘:reset‘), $(‘:file‘)
// 选择启用/禁用/checked/选中的input,option
$(‘:input:enabled‘), $(‘:input:disabled‘), $(‘:input:checked‘), $(‘select option:selected‘)

$(‘<li class="greet">test</lt>‘)

$(‘li‘, someElement);

// first方法返回结果集的第一个成员，last方法返回结果集的最后一个成员。
$("li").first()
$("li").last()
// next方法返回紧邻的下一个同级元素，prev方法返回紧邻的上一个同级元素。
// 如果next方法和prev方法带有参数，表示选择符合该参数的同级元素。
$("li").first().next()
$("li").last().prev()
$("li").first().next(‘.item‘)
$("li").last().prev(‘.item‘)
// parent方法返回当前元素的父元素，parents方法返回当前元素的所有上级元素（直到html元素）。
// parent, parents, children这三个方法都接受一个选择器作为参数。
$("p").parent()
$("p").parent(".selected")
$("p").parents()
$("p").parents("div")
// children方法返回选中元素的所有子元素。
$("div").children()
$("div").children(".selected")
// 等同于
$(‘div > *‘)
$(‘div > .selected‘)
// siblings方法返回当前元素的所有同级元素。
$(‘li‘).first().siblings()
$(‘li‘).first().siblings(‘.item‘)
// nextAll方法返回当前元素其后的所有同级元素，prevAll方法返回当前元素前面的所有同级元素。
$(‘li‘).first().nextAll()
$(‘li‘).last().prevAll()

// closest方法返回当前元素，以及当前元素的所有上级元素之中，第一个符合条件的元素。
// find方法返回当前元素的所有符合条件的下级元素。
$(‘li‘).closest(‘div‘)
$(‘div‘).find(‘li‘)
// add方法用于为结果集添加元素。
$(‘li‘).add(‘p‘)
// addBack方法将当前元素加回原始的结果集。
$(‘li‘).parent().addBack()
// end方法用于返回原始的结果集
$(‘li‘).first().end()
 
// filter方法用于过滤结果集，它可以接受多种类型的参数，只返回与参数一致的结果。
// 返回符合CSS选择器的结果
$(‘li‘).filter(‘.item‘)
// 返回函数返回值为true的结果
$("li").filter(function(index) {
    return index % 2 === 1;
})
// 返回符合特定DOM对象的结果
$("li").filter(document.getElementById("unique"))
// 返回符合特定jQuery实例的结果
$("li").filter($("#unique"))
// not方法的用法与filter方法完全一致，但是返回相反的结果，即过滤掉匹配项。
$(‘li‘).not(‘.item‘)
// has方法与filter方法作用相同，但是只过滤出子元素符合条件的元素。
$("li").has("ul")
// 上面代码返回具有ul子元素的li元素。