jquery 常见功能2

链式操作
$(".hasclass").click(function(){
    $(this).addClass("highlight").children('a').show().end().siblings().removeClass    

("highlight").children("a").hide();
});

对于同一个对象不超过3个操作的，可以直接写成一行，对于同一个对象的较多操作，建议每行写一个操作。

$("#table>toby>tr:has(td:last:has(:checkbox))").css("background","red");
:has匹配含有选择器所匹配的元素的元素   // 第一个元素值得是#table>toby>tr 类似于这样的
第二个“元素”指的是：has（selector）  参数是一个用于筛选的选择器


jquery对象是一个数组对象，可以通过[index]|get(index),转换成dom对象
如果是id的话  虽然不能重复  只有唯一的一个 但是也是  数组对象 ，但是如果是class 的话  dom也是一个

数组对象了
js:
var items = document.getElementsByTagName("p");//获取页面中的所有元素
for(var i=0;i<items.lenght;i++){
    items[i].onclick = function(){
        //doing something
    }
}

js中的window.onload 是等dom 文件及图片都加在后才能触发事件   $(function(){});只要dom树加载完毕后就

能触发事件；

平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂

$(document).ready(function(){
    var $cr=$("#cr");
    var cr=$cr[0];
    $cr.click(function(){
        if(cr.checked){//dom方式判断  //jquery $cr.is(:checked)
            alert('gagag');
        }
    });
});
is()   参数可以是函数 ， 选择器 ， 一个dom对象，
jquery选择器的写法于css选择器的写法相似 只是一个是执行行为，一个是添加样式  jquery也操作css

需要注意的是：$("#tt")获取的永远是对象，即使网页上没有此元素，因此当用jquery检查某个元素在网页上是

否存在时，不能使用代码：
if($("#tt")){
    //do something
}

应该使用：
if($("#tt").length>0){
    //do something
}

var item = document.getElementById('td');
var tbody = item.getElementsByTagName('tbody')[0];//获取表格的第一个tbody元素
var trs   =tbody.getElementsByTagName('tr');//获取tbody元素下的所有tr元素
for(var i=0;i<trs.length;i++){
    if(i%2==0){
        trs[i].style.backgroundColor = "#888";
    }
}
在层次选择其中   $("prev~siblings")  于nextAll()  是等价的  都是去prev 后面siblings的元素
$('prev').nextAll(siblings);  选取prev 后面siblings所有的同辈元素
$(prev+next);于 next()    相等

：选择器
：not （selector） 去除所有与（给定选择器 指的就是selector）的元素
:animagte     筛选正在动画的元素
内容选择器
：contains(text)
:empty（）选取不包含子元素的空元素  与它相反地是  :parent（）
:has(p) $("div:has(p)") 选取含有<p>元素的div元素

可见性选择器：
：hidden  可见
:visible  不可见
$("div .class:visbile').css('bgcolor','red');

在可见性的选择器中，需要注意选择器：hidden,它不仅包括样式属性display为none的元素，
<input type='hidden'/>和 visibility:hidden之类的元素
show （）是jquery的方法，它的功能是显示元素，2000是时间  单位：毫秒
属性选择器：
$("div[id][title$='test'])选取拥有属性的id，并且属性title以test结束的<div>元素

注意：选择器是行为与文档内容之间的链接的纽带，选择器最终的目的就是能够轻松的找到文档中的元素；

Dom Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网

页，也可以来处理任何一种使用标记语言编写出来的文档，列如xml.

HTML_DOM 和DOMCore都可以获取对象、属性 但是HTML_DOM只能用来处理web文档。

CSS_DOM     是针对css的操作：
element.style.color = 'color';

对文本节点的一些操作：

prepend（）将文本节点放入此内容的前面    $('p')/prepend('<b>你好</b>')  结果:<p><b>你好</b>我想说

：</p>

insertbefore  before  after  afterbefor  这几个查手册去


var $one_li = $("ul li:eq(1)")//获取第一个ul对象节点中的第二个li元素节点


remove（）是删除节点 但是返回值是自己删除的那几个节点
empty（） 是清空节点，它能清空元素中的所有后代节点。是清空元素里的内容：注意是元素里


clone  用的比较少，有的商品网站上用这个  把东西直接拉入购物车用的就是clone（true）复制  里面有个参

数

replaceWith()是将所有匹配的元素都替换成指定的html或者dom元素。
replaceAll（）与上面的相同只是颠倒了操作

注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新

元素上重新绑定事件。

wrap() ;$('strong').wrap("<b></b>")//用<b>标签把<strong>元素包裹起来
这个是把匹配的单独包裹起来  wrapAll()是总体包裹起来
wrapInner 是把每个匹配的元素节点的内容包裹起来

$('p').attr({'key':'value'});

jquery中的很多方法都是同一个函数实现获取和设置的，列如上面的attr(),类似的还有html()text()height()

widht()val()css()

toggle  ()  toggleClass()  两者的性质是一样的 只是执行的行为不一样

html（）方法可以用于xhml 但不能用于xml

javascript中的innerText属性并不能在Firefox浏览器下运行，而jquery的text（）方法支持所有的浏览器
text（）方法对html文档和xml文档都有效

this.datevalue 指的就是当前文本框的默认值

大家知道val（）能获取对象的值，设置对象的值 ，它也能是select 、checkbox、radio相应的对象被选中，在

表单操作中会经常用到。
如果要是两个都选中的话，$('#multiple').val(['2号'，'3号']);以数组的形式复制
在jquery中，val()方法是从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会被选中
<option value='2号'>2号</option>
<option value='1号'>2号</option>

sibling（）获取此对象的前后同辈元素

Css-Dom 方法：


$('p').css({'fontSize':'30px','backgroundColor':'#88888'})
注意：如果是数字，将会被自动转化为像素值。
      在css方法中，如果属性中带有‘-’符号，列如 font-size和background-color属性，如果在设置这些属

性的值的时候不带引号，那么就要用驼峰写法，列如：$('p').css

({fontSize:'30px',backgroundColor:'#888888'});如果键带上引号写成这两种都行

offsect()  获取某个元素的相对位置  
position() 获取元素相对于最近的一个position样式属性设置的relative或者absolute的祖父节点的相对偏移

，


window.onload 的dom和图片加载完后才触发事件  $(function(){});dom加载完后就触发

$(window).load(function(){})  等价于（不是全等于） window.onload= function(){}

$(document).ready(function(){}); == $().ready(function(){}); ==$(function(){});

bind(1can,2can,3can)   第一个参数是事件类型：blur focus load resize scroll unload click dblclick

mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown

keypress keyup error  也可以是自定义名称  第二个参数作为event.data属性值传给对象  第三个处理函数


$(function(){
    $("pan h5.head").bind('click',function(){
        $(this).next('div.content').show();
    })
})
这里的this引用的是携带相应行为的DOm元素。为了使该dom元素能够使用jquery中的方法，可以使用$(this)将

其转换为jquery对象


jquery中的合成事件  hover和toggle 都属于jquery自定的方法


toggle方法用于模拟鼠标连续单机事件。第一次单机元素，触发指定的第一个函数；再次单机同一个元素时，触

发指定的第二个函数，依次触发   轮番调用
toggle（）方法另一个作用是切换元素的可见状态。

事件冒泡：
<div><span>内部span的内容</span>内部div的内容</div>

当div  span  上都绑定click事件时  当点击span时 也会触发div事件  （从里往外 ）
这就是事件冒泡，
防止事件冒泡的方法是event.stopPropagation（）事件的一个方法
event.preventDefault();方法来阻止元素的默认行为。


event.target()  //获取触发事件的元素
$("a[href=http://google.com]").click(functiton (event){
    alert(event.target.href);
    return false;
});

event.pageX() event.pageY()   获取到相对于页面的x和 y的坐标   如果页面上有滚动条，还要加上滚动条的

宽度或高度，IE还要减去默认的2px的边框。

event.which()是获取单机事件的左 中 右


one()  与bind 类似  执行一次  随后就不执行了

trigger（）可以模拟事件去执行  比如进入页面就执行
它不仅能触发浏览器的具有相同名称的事件，也可以触发自定义名称的事件。
$("#bnt").trigger("click");   $("#bnt").click();

触发自定义事件

$("#bnt").bind("myClick",function(event, 参数1，参数2，参数3){
    $("#test").append("<p>我的自定义事件</p>");
});
$("#bnt").trigger("myClick");

它有两个参数  类型  数组 ['as','gd','ew']  这样的格式
trigger触发事件后，会执行浏览器的默认操作   列如  input 元素会得到焦点。
triggerHander()可以取消默认行为