jQuery复习笔记

jQuery最大的好处:可以不用考虑浏览器的兼容性。

一.选择器

1.将普通对象封装成jQuery对象

var test = document.getElementById('zh-profile-ask-inner-list');
var jqtest = $(test);
jqtest.get(0);

2.按id/tag/class/属性/组合查找

var test1 = $('#abc'); //按ID查找
var ps = $('p');    //按tag查找
var a = $('.red.green');  // 按class查找,注意没有空格!
var email = $('[name=email]'); // 按属性查找,找出<??? name="email">

//组合查找
var emailInput = $('input[name=email]'); // 不会找出<div name="email">
var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>

//多项选择器
$('p,div'); // 把<p>和<div>都选出来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来

3.层级选择器

  • 无父子关系:用$('ancestor descendant')来选择,层级之间用空格隔开。
  • 有父子关系: $('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]

二.查找和过滤

1.查找

  • find:查找子元素
  • parent:查找父元素

同一层级

  • 向上查找:prev()
  • 向下查找:next()

2.过滤

  var langs = $('ul.lang li');

  var a = langs.filter('.dy');

  map get

  .first()/.last()/.slice()