javascript学习笔记（三）

Html dom文档对象模型；

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

 

通过id找HTML元素：

Document.getElementById(“idname”);

通过标签名查找：

查找 id="test"的元素，然后查找"test" 中的所有 <p>元素

var x=document.getElementById("test");

var y=x.getElementsByTagName("p");

 

 

jquery 是javascript的一个函数库；封装了一些常用的操作和方法，简化对网页元素的操作；

利用jquery 一般都会有这么个函数,

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。也可以理解为初始化页面上的操作方法

Jquery选取元素方法：

$("p") 选取 <p> 元素。

$("p.intro") 选取所有class="intro" 的 <p> 元素。

$("p#demo") 选取所有id="demo" 的 <p> 元素

$("#eleID")选取id 为eleID的元素；

$("ul li:first")每个<ul> 的第一个 <li> 元素

$("[href$='.jpg']") 所有带有以".jpg" 结尾的属性值的 href 属性

 

Jquery遍历方法—往上找父亲元素

$(" ").parent();返回直接的父元素，也就是层级往上第一个元素；

parents()；返回被选元素的所有祖先元素。父亲，祖父，曾祖父一直到祖宗十八代；

parents();可以带参数，比如“body div.ulclass” 父节点中body元素下的div元素中的样式为ulclass的父节点元素；又比如：“#booklist” 父节点元素中id 为booklist的父节点元素；

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$("span").parentsUntil("div");返回span 和div之间的父节点元素；

Jquery遍历方法—往下找孩子节点；

children() 方法返回被选元素的所有直接子元素，只会往下找一级；

children()可以带参数。$("div").children("p.1");返回div节点下样式类名为1的P元素

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

Jquery遍历方法—找兄弟同胞；

siblings() 方法返回被选元素的所有同胞元素

$("h2").siblings();返回和h2元素同级的所有元素；

$("h2").siblings("p");返回和h2元素同级的所有p元素；

next() 方法返回被选元素的下一个同胞元素

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素；

$("h2").nextUntil("h6");返回介于 <h2> 与 <h6> 元素之间的所有同胞元素；

prev(), prevAll() 以及 prevUntil() 方法的工作方式，这些事往前面找同级元素；

Jquery过滤元素；

first() 方法返回被选元素的首个元素

$("div p").first();选取首个 <div> 元素内部的第一个 <p> 元素

last() 方法返回被选元素的最后一个元素

$("div p").last();选择最后一个 <div> 元素中的最后一个 <p> 元素

eq() 方法返回被选元素中带有指定索引号的元素

$("p").eq(1); 选取第二个 <p> 元素（索引号 1）

filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$("p").filter(".intro");返回带有类名 "intro" 的所有 <p> 元素；

not() 方法返回不匹配标准的所有元素。

$("p").not(".intro");返回不带有类名 "intro" 的所有 <p> 元素；