jQuery学习笔记

发表于 | 分类于 | 阅读次数

简介

jQuery是一个JavaScript函数库，是目前最流行的JS框架，jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库包含以下功能：HTML元素选取；HTML元素操作；CSS操作；HTML事件函数；JavaScript特效和动画；HTML DOM遍历和修改；AJAX；Utilities。

jQuery语法

jQuery使用的语法是XPath与CSS选择器语法的组合。

文档就绪事件

文档就绪后执行jQuery方法

1
2
3
4
5
6
7
$(document).ready(function(){
   //jQuery代码 
});
//简洁写法：
$(function(){
    
});

jQuery选择器

jQuery选择器基于元素的id、类、类型、属性、属性值等查找或选择HTML元素。都以$()开头。

元素选择器：$(“p”)

jQuery事件

页面对不同访问者的相应叫做事件。

jQuery效果

隐藏和显示：hide(),show()

淡入淡出： fadeIn(),fadeOut(),fadeToggle(),fedeTo()

滑动：slideDown(),slideUp(),slideToggle()

动画：animate()

停止效果：stop()

Chainning允许可以在一条语句中（相同元素上）运行多个jQuery方法。

jQuery HTML

jQuery DOM操作，使访问和操作元素和属性变得容易。

DOM（Document Object Model），即文档对象模型，定义访问HTML和XML文档的标准。

获取、设置内容和属性

获取或设置内容：text(),html(),val()

获取或设置属性：attr()

方法提供回调函数，毁掉函数有两个参数，function(i, origValue)

jQuery 添加元素/内容

append(),prepend()：在被选元素的结尾/开头插入内容。是在选择元素内部嵌入

after(),before()：在备选元素之后/之前插入内容。是在元素外面追加。

jQuery 删除元素

remove()，删除备选元素及其子元素（可接受参数，进行过滤）。

empty()，从被选元素中删除子元素。

jQuery操作CSS类

addClass(),removeClass(),toggleClass()

jQuery css()方法

1
2
3
4
5
6
//返回css属性
$("p").css("background-color");
//设置css属性
$("p").css("background-color","yellow");//注意：中间是逗号
//设置多个css属性
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery遍历

  • 向上遍历：patrent(),parents(),parentsUntil()

    1
    2
     $("span").parentsUntil("div");
    //返回介于<span>与<div>元素之间的所有祖先元素。

  • 向下遍历：children()返回直接字元素 ,find()返回所有后代

  • 水平遍历：siblings()返回被选元素的所有同胞元素，next()返回下一个同胞元素，nextAll()返回所有跟随的同胞元素，nextUntil()

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

    prev(),prevAll(),prevUntil()类似，向前遍历。

  • 过滤
    first(),last(),eq()返回被选元素中带有指定索引号（从0开始）的元素。

    filter(),not()