《jQuery基础教程》4th 笔记- 选择元素

第一章 入门
-----------------------------
$(document).ready(function() {
  $('div.poem-stanza').addClass('highlight');
});
-----------------------------
1.$()
$()函数；接受CSS选择符作为参数，所有能在样式表中使用的选择符都可以传给这个函数；返回对应元素的jQuery对象

2.添加风格
.addClass() 将一个CSS类应用到我们选择的页面元素；唯一参数是要添加的类名；

3.删除风格
.removeClass() 是.addClass()的反方法

4.$(document).ready()
4.1 延迟执行
$(document).ready()方法，让内部执行的代码延迟到DOM加载完毕后再调用该函数，但是不用等待页面中的图像加载完成。

4.2 避免污染
把大多数的jQuery代码都放在一个函数体中是很有用的，因为这样可以避免某些命名空间冲突。
例如正是由于这个特性可以使用jQuery.noConflict()为其他库释放简写方式$，但我们仍然能够定义在$(document).ready()中使用的局部简写方式；
（PS：指的是哪些局部简写方式）

5.引用参数
$(document).ready()的参数可以是一个已定义函数的引用
------
function addHighlightClass(){
$('div.poem-stanza').addClass('highlight');

}

$(document).ready(addHighlightClass);
------
6.匿名函数做参数
$(document).ready(funtction(){
$('div.poem-stanza').addClass('highlight');
});
可以外层函数中把内部函数赋值给外层变量或者全局变量，从而逃离作用域调用；

============================
第二章 选择元素

1. 基本选择符种类：
-----------------------------------------------
选择符 CSS jQuery 说明
-----------------------------------------------
标签名 p{}   $('p') 取得文档中所有段落
ID #some-id $('some-id') 取得文档中指定ID的元素
类 .some-class $('.some-class')取得文档中指定类得所有元素
-----------------------------------------------
.horizontal{
float:left;
list-style:none;
margin:10px;
}

${document}.ready(function(){
//给ID为selected-plays的ul的子li元素添加风格
$('#selected-plays > li').addClass('horizontal');
//否定式伪类选择符
$('#selected-plays li：not(.horizontal)').addClass('sub-level');
});

2.属性选择符
$('img[alt]') 通过图像的alt属性选择带有alt属性的所有图像元素；
属性选择符的通配符语法
^ 表示值在字符串的的开始
$ 表示值在字符串的结尾
! 表示对值取反

$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]').addClass('henrylink');

3.自定义选择符
提示：自定义选择符可能不像jQuery一样使用浏览器原生DOM选择符查找引擎，效率可能不高，所以，尽量不要频繁自定义选择符
$('div.horizontal:eq(1)') 从带有horizontal类的<div>集合中选择第二项

js数组从0开始编号，CSS从1开始编号

$('tr:even').addClass('alt');
:eq, :odd, :even
都是用JS从0 开始的编号方式

:nth-child选择符
:nth-child选择符相对于元素的父元素而非当前选择元素来计算位置；
避免上一个表格奇偶行数影响当前表格显示；可接受参数 odd,even
:nth-child 是jQuery中唯一从1开始计数的选择符
$('tr:nth-child(odd)').addClass('alt');

上下文选择符 :contains()
$('td:contains(Henry)').addClass('highlight');
提到henry的元素高亮
:contains()掉小写敏感

基于表单的选择符：
--------------------------------
选择符 匹配
--------------------------------
:input 输入字段、文本区、选择列表和按钮元素
:button 按钮元素type属性值为button的输入元素
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 勾选的单选按钮或复选框
:selected 选择的选项元素

组合使用的表单选择符更具针对性
$('input[tpe="radio"]:checked') 选择所有选中的单选按钮

4.DOM遍历方法
$('tr:even').addClass('alt');
的等同表示:
$('tr').filter(':even').addClass('alt');

.filter()可以接受函数参数
$('a').filter(function() {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
删选出了包含域名this.hostname的href属性，并且连接指向的域名不等于当前域的名称(location.hostname)

.next()方法选择下一个最接近的同辈元素
.nextAll()选择之后的所有单元格
.prev()
.prevAll()

.siblings()能选择处于相同DOM层次的所有其他元素

如果要选的是半闭半开去甲[) 则添加 .addBack()；.addBack()会包含锚点元素

而要选择同辈元素有很多方法：
$('td:contains(Henry)').parent().children().addClass('highlight');

连缀:$('td:contains(Henry)').parent().find('td:eq(1)').addClass('highlight').end().find('td:eq(2)').addClass('highlight');

5. 访问DOM元素
var myTag= $('#my-element').get(0).tagName;
var myTag= $('#my-element').[0].tagName;