锋利的jQuery

标签：

今天总要找点东西学习，其实有很多东西要记录，慢慢写，今天看书吧，这几天把这本书看完，这里记一些要点

从头开始记吧

第一章 认识jQuery

$就是jQuery的简写

$(function(){}) 就是 $(document).ready(function(){})的简写

与window.onload相比有三点（执行时机、编写个数、有无简写）

DOM---文档对象模型，BOM---浏览器对象模型

第二章 jQuery选择器

和css选择器相同

基本选择器：

<1> $("#test")  id选择器

<2> $(".test")  类选择器

<3> $("p") 标签选择器

<4>$("*") 选择所有元素

<5>$("div,span,.myclass") 组合------可组合，这个很实用

层次选择器：

<1>$("div span")  选择div中  span后代元素

<2>$(“div >span”) 选择div中span的子元素

<3>$(“.one + div”)选one的下一个div元素————相当于$(“.one”).next("div")       //同辈的下一个元素

<4>$("#two ~ div") 选id为two的后面所有<div>兄弟元素————相当于$(“#two”).nextAll("div");     //不包含#two

过滤选择器：

<1>$(" div:first") 所有div元素中第一个div
<2>$(" div:last") 所有div元素中最后一个div
<3>$(" input:not(.myclass)") 不是 class为myclass 的<input>元素
<4>$(" input:even") 索引为偶数的input                                            //可以做隔行变色
<5>$(" input:odd")索引为奇数的input
<6>$("input:eq(1)") 索引为1的input——————index从0开始            //$(‘div:eq(1)‘).css(‘backgroundColor‘,‘red‘);     单一选择
<7>$("input:gt(1)") 索引大于1的input              从0开始,不包含1        //$(‘#one a:gt(0)‘).css(‘color‘,‘red‘);         向下数       
<8>$("input :lt(1)") 索引小于1的input              从0开始                   //向上数
<9>$(":header") 所有的<h1> <h2> <h3>......
<10>$("div:animated") 正在执行动画的<div>
<11>$("div:contains(‘我‘)") 含有文本‘我’的div
<12>$("div:empty") 空的div
<13>$(" div :has(p)") 含有<p>的<div>                                         //$(‘#one a:has(span)‘).css(‘color‘,‘red‘);    包含span的a                       
<14>$("div:parent") 含有子元素的<div>
<15> $(":hidden") 所有不可见元素
<16>$("div:visible") 所有的可见的<div>
<17>$(" div[id]") 拥有id属性的<div>
<18>$(" div[title=test]") title为test的<div>
<19> $ ("div [title!=test]") title不为test的<div>
<20> $(" div[title^=test]") title以“test”开头的div
<21>$ ("div [title$=test]") title以“test”结束的div
<22>$(" div[title*=test]") title含有test的div
<23>$("div[id][title$=test]") 组合多条件选择
<24>:nth-child(index/even/odd/equation) ————————index从1开始
<25>:first-child
<26>:last-child
<27> :only-child
<28> $("#form1 :enabled") id为“form1”的表单内所有可用的元素
<29>$("#form2:disable")
<30>$("input:checked") 所有被选中的<input>元素
<31>$("select:selected") 所有被选中的<select>元素
<32>$(":input") 所有<input> <textarea><select><button> 元素
<33>$(":text") 所有单行文本框
<34>$(":password") 所有密码框
<35>$(":radio") 所有单选框
<36>$(":checkbox") 所有复选框
<37>$(":submit") 所有的提交按钮
<38>$(":image") 所有图像按钮
<39>$(":reset") 所有重置按钮
<40>$(":button") 所有按钮
<41>$(":file") 所有上传域
<42>$(":hidden") 所有不可见元素

有些常用，有些不常用，这里做个记录

为了练习写了个小例子，全选，全不选

<input type="button" value=‘quanxuan‘/>
<input type="button" value=‘quanbuxuan‘/>
<input type="checkbox" />
<input type="checkbox" checked=‘checked‘/>
<input type="checkbox" />
<script>
$(‘input[value=quanxuan]‘).click(function(){
    $(‘input:gt(1)‘).prop(‘checked‘,true)
})
$(‘input[value=quanbuxuan]‘).click(function(){
    $(‘input:gt(1)‘).prop(‘checked‘,false)
})
</script>

当然这本书开篇就讲了，jQuery很大的优势是可以链式，所以可以写成这样

$(‘input[value=quanxuan]‘).click(function(){
    $(‘input:gt(1)‘).prop(‘checked‘,true)
}).next().click(function(){
    $(‘input:gt(1)‘).prop(‘checked‘,false)
})

第三章jQuery中的DOM操作

 1、删除节点

$(‘ul li:eq(1)‘).remove();                //获取第二个<li>元素节点后，将他从网页中删除

$(‘ul li‘).remove(‘li[title!=菠萝]‘);                //可以做选择性的删除

empty()    清空节点内容

2、复制节点

 clone()                                          //$(‘ul li‘).clone().appendTo(‘ul‘);                //复制li，并追加到ul中   复制的同时，如果clone(true)，传递了true，就复制了他绑定的事件（默认是不复制事件的）

锋利的jQuery

标签：

原文地址：http://www.cnblogs.com/change-oneself/p/4811029.html