jQuery从入门到忘记

jQuery 是一套JavaScript脚本库，注意 jQuery 是脚本库,而不是脚本框架。"库"不等于"框架"。jQuery 并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事。

脚本库能够帮助我们完成编码逻辑,实现业务功能。使用 jQuery 将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮。

使用 jQuery 的这些功能函数,能够帮助我们快速完成各种功能,而且会让我们的代码异常简洁。

javascript脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦，比如在 jQuery 中就通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象。

• 一、选择器（selector）
  • 1、基本选择器
  • 2、层级选择器
  • 3、基本筛选器
• 二、筛选器
• 三、操作元素（action）
  • 1、 属性操作
  • 2、CSS操作
  • 3、文档处理
  • 4、事件

总结一下，jQuery封装了JavaScript + DOM，可以写的更少做的更多。本文仅对常用内容做一个总结，方便日后把相关知识点快速捡起来。

jQuery语法基本格式：$(selector).action()

链式编程

jQuery速查表

一、选择器（selector）

1、基本选择器

#id
element
.class
* 包含body
selector1,selector2,selectorN 并列选择，组合

$("p").css("color","red")
$("#div1").text("it works")
$(".div2").css("background","yellow")

2、层级选择器

ancestor descendant     所有后代
parent > child          只有儿子
prev + next             后面紧邻的下一个
prev ~ siblings         后面所有的兄弟同辈

3、基本筛选器

• 针对索引进行筛选

:first      第一个
:even       索引为偶数
:odd        索引为奇数
:eq(index)  索引等于
:gt(index)  索引大于
:lt(index)  索引小于

$("li:first")  $("li:even")
$("li:eq(2)")  $("li:gt(1)")

其他

:not(selector)  非
:header
:focus

针对内容进行筛选

:contains(text)

$("div:contains('moumou')")

:empty              选择内容为空的

:has(selector)      如包含P标签

$("div:has(p)").addClass("test");

• 针对属性进行筛选----重要常用

[attribute]             也可以自定义属性
[attribute=value]
[attr1][attr2][attr3]   多个属性并列

<div id="div1" selfdefine="moumou"/>

$("div[selfdefine]")

$("div[id='div1']")

• 针对表单进行筛选

:input
:checkbox

$("input")
等价于
$(":input")

$("[type='text']")
等价于
$(":text")

$("input[type='checkbox']")
等价于
$(":checkbox")

针对表单对象属性筛选

:enabled
:disabled       禁用标签
:checked
:selected

$("input:checked")
$("select option:selected")

二、筛选器

过滤筛选器

\\通过索引过滤
eq(index|-index)
first()
last()

hasClass(class)

$("p:eq(1)").css("fontSize","30px")
$("p").eq(1).css("fontSize","30px")
//优势后者不需要字符串拼接

查找筛选器

children([expr])        只有儿子，没有孙子
find(e|o|e)             所有后代

$("div").children(".test")    $("div").find(".test") 

next([expr])            紧邻的下一个
nextAll([expr])         下面的所有满足条件的集合
nextUntil([e|e][,f])    到**为止

$(".test").next()    $(".test").nextAll()   $(".test").nextUntil()

prev([expr])            紧邻的上一个
prevall([expr])
prevUntil([e|e][,f])

$("div").prev()  $("div").prevAll()  $("div").prevUntil()

parent([expr])          父亲
parents([expr])         父亲爷爷等祖先
parentsUntil([e|e][,f])

$(".test").parent()  $(".test").parents()  $(".test").parentUntil() 

siblings([expr])        后面的兄弟

$("div").siblings()

三、操作元素（action）

1、 属性操作

//HTML代码/文本/值
$("p").text()
$("p").html()
$(":checkbox").val()

$(".test").attr("attr")
$(".test").attr("attr","value") 

$(".test").attr("checked","checked")
$(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")
$(".test").removeClass("hide")

取消全选的实例

 <button onclick="selectAll();">全选</button>
 <button onclick="cancel();">取消</button>
 <button onclick="reverse();">反选</button>
 <table border="1">
     <tr>
         <td><input type="checkbox"></td>
         <td>11111</td>
     </tr>
     <tr>
         <td><input type="checkbox"></td>
         <td>11111</td>
     </tr>
     <tr>
         <td><input type="checkbox"></td>
         <td>11111</td>
     </tr>
 </table>

<script src="jquery-1.8.2.js"></script>
<script>
    function selectAll() {
         $("table :checkbox").prop("checked",true)
    }
     function cancel() {
         $("table :checkbox").prop("checked",false)
    }
    function reverse() {
         $("table :checkbox").each(function(){
               if ($(this).prop("checked")){
                   $(this).prop("checked",false)
               }
               else {
                   $(this).prop("checked",true)
                }
        })
}
</script>

each 函数需要注意的问题：

// each return 退出与外层函数无关
// each return false 提示each退出
function f1(){
    var li=[11,22,23,44]
    //x,y索引和值
    $.each(li,function (x,y) {
           console.log(y);
           if (x == 1){
            return false;
           }
    });
    return
    console.log("ok");
}

2、CSS操作

(样式) css("{color:'red',backgroud:'blue'}")

(位置) offset() position() scrollTop() scrollLeft()

(尺寸) height() width()

 //scrollTop距离顶部的距离
 window.onscroll=function(){
    var current=$(window).scrollTop();
    console.log(current)
}

3、文档处理

内部插入

append()
appendTo()
$("#c1").append("<b>hello</b>")
$("p").appendTo("div")

prepend()
prependTo()

外部插入

before()        insertBefore()
after           insertAfter()
replaceWith()   替换
remove()        删除标签
empty()         清空内容
clone()         复制某标签

4、事件

整个文档拓扑结构加载再执行js代码

// 所有函数放入其中，需要等待整个文档加载完，避免找不到
$(document).ready(function(){...})
$(function(){...})

绑定事件

//js中的写法
<button class="result" onclick="show(this)"></button>
function show(self){
    self.lalalala;
}

//jQuery的写法
$(".result").click(function(this){
    this.lalalala;
})

$("p").click(function(){})

$("p").bind("click",function(){})                    

//用的时候再绑定事件 事件委托
$("ul").delegate("li","click",function(){})