jQuery

目录：

 

 中文文档 http://jquery.cuishifeng.cn/index.html

 

简介

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

 

jQuery 库可以通过一行简单的标记被添加到网页中。

<script type="text/javascript" src="jquery.js"></script>

jQuery 库包含以下特性：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

 

一、动态效果

1、基本效果

　　显示元素：show()

　　隐藏元素：hide()

　　显示/隐藏元素：toggle()

　　toggle("show")示例：

<body>
    <button id="hide" type="button">Click me</button>
    <p>Hello World.</p>
</body>
<script src="static/jquery.js"></script>
<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            $("p").toggle("slow","swing");
        });
    });
</script>

 2、滑动

 3、淡入淡出

 

二、标签选择器

　　id选择器： $("#id")

　　元素选择器：$("div")

　　clss选择器：$(".class")

　　组合选择器：$("div,span,.class,#id")

　　层级选择器：$("form input")

　　父子选择器：$("form input")

　　兄弟选择器：$("prev ~ siblings")

　　属性选择器：$("input[type='text']")

 　  first/last: $("li:first") $("li:last")  $("ul li:first-child") $("ul li:last-child")

 

三、筛选标签　

　　first() --获取匹配的第一个元素: $('li').first()

　　last() --获取匹配的最后个元素: $('li').last()

 

　　eq(num|-num) --获取当前链式操作中第N个jQuery对象: $("p").eq(1|-1)

　　filter() --筛选出与指定表达式匹配的元素集合: $("p").filter(".selected")

　　hasClass() --检查当前的元素是否含有某个特定的类，如果有，则返回true: $("p").hasClass("hide")

　　

　　parent() --取得一个包含着所有匹配元素的唯一父元素的元素集合：$("p").parent()

　　siblings() --取得兄弟元素的集合：$("p").siblings()

　　children() --取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合： $("div").children()

 

　　prev([expr]) --获取前一个同辈元素：$("b").prev().css("color","red");

　　prevall()

　　prevUntil()

 

　　next([expr]) --取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合：$("p").next()

　　nextAll([expr]) --查找当前元素之后所有的同辈元素：$("div:first").nextAll().addClass("after")

　　nextUntil() --查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止：$("a").nextUntil("b").css("color","red")

 

四、标签属性

1、attr():设置或返回被选元素的属性值

$("input[type='checkbox']").attr("checked", true);
$("img").attr({ src: "test.jpg", alt: "Test Image" });

2、removeAttr(name):从每一个匹配的元素中删除一个属性

$("input[type='checkbox']").removeAttr("checked")

3、prop(): 专门用来对input【radio checkbox】设置属性：选中和取消

$("input[type='checkbox']").prop("checked", true);

4、removeProp():用来删除由.prop()方法设置的属性集

 

5、CSS类

 

6、HTML代码/文本/值

 

 

五、CSS添加

单个样式：$("p").css("color","red");
多个样式：$("p").css({ "color": "red", "background": "blue" });
$("p").height(20);
$("p").width(20);

六、遍历

　　each(callback)

    $("#a").siblings().each(function () {
        $(this).css("color", "red");
    });

 

七、文档操作

增加
删除


八、事件

　页面载入事件：
　切换事件：
posted @ 2017-04-24 17:55  Vincen_shen  阅读(144)  评论(0)    收藏  举报