您的位置：首页 > Web前端 > JQuery

jQuery的学习笔记

2016-03-20 10:30 639 查看
简介---语法---获取元素--事件---DOM操作（获增删）

1，什么是jQuery

     是JavaScript的函数库。（优点：方便，解决了浏览器的兼容问题）

2，功能：

HTML元素的选取
HTM元素的操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM 遍历和修改
AJAX （不刷新页面的同时来修改页面的内容）
Utilities(jQuery的库)
3，引入jQuery

从jquery.com下载jQuery库
从CDN中下载jQuery
版本介绍：v1.x (ie6+) v2.x(ie9+)
4，基本的语法：

$(ele).action();
说明：$ 定义jQuery

文档加载完毕$(document).ready(function(){});
选择器（selector）-----得看文档元素选择：$("p")
id选择：$("#id")
类名选择：$(".class")
5,jQuery事件：

常用的事件方法-----得看文档

绑定事件  on(事件名,函数名)   $("#pid").on("click",demo1);
解除绑定事件  off(事件名，函数名)  $("#id").off("click",demo1);
事件的目标
事件的冒泡: 阻止父级事件冒泡(stopPropagation());阻止所有的事件冒泡（stopImmediatePropagation();）
自定义事件  :

$(document).ready(function() {
$("#btn1").click(function() {
var e=jQuery.Event("myEvent");  //自定义自己的事件
$("#btn1").trigger(e);
});
 
$("#btn1").bind("myEvent",function  (event) {
console.log(event);
})
});


6，DOM操作

捕获
获取文本内容text()
获取value值（常用于input标签）val()
获取元素的属性attr("属性名")
修改

修改文本内容text("要改的内容")
修改内容html("要改的，可以加标签")
修改文本框的value内容val("要改成的内容")
修改元素的属性值attr({"属性名":"属性值"，"属性名":"属性值"})
回调text(function(nteger index, String text ){return})
添加

append()/after()在后面添加元素
prepend()/before()在前面添加元素
三种添加元素的方式（html,jQuery,js）
var text1="<p>text1</p>";
var text2=$("<p></p>").text("text2");
var text3=document.createElement("p");
text3.innerHTML="text3";
$("body").append(text1,text2,text3);


删除

remove()全部删除
empty()删除里面的内容
显示和隐藏

hide(time)隐藏
show(time)显示
toggle(time)隐藏/显示
很炫酷的显示和隐藏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏的效果</title>
<style type="text/css">
div{float:left; width:50px; height:50px;margin:4px; border:2px solid #ff0;
box-shadow:0 0 4px #00f; border-radius:5px; background-color:#ff0;}
</style>
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 
for(var i=0;i<5;i++){
$("<div>").appendTo(document.body);
}
 
$("div").click(function() {
$(this).hide(1000);
});
 
});
</script>
</head>
<body>
</body>
</html>


淡入和淡出

fadeIn(time)淡入
fadeOut(time)淡出
fadeToggle(time)淡入/淡出
fadeTo(time,透明度)透明度是0-1
滑动效果

slideUp(time)向上滑动
slideDown(time)向下滑动
slideToggle(time)向上/向下滑动
回调
每一个动画都有一个function，用于回调；
一个对象可以连续加多个动画 $("con").slideUp(1000).slideDown(1000);

7,ajax的异步访问和加载

三种方法：get(); post(); load();

8,jQuery的扩展和noConflict    

9，jQuery的css方法和盒子模式

操作css的方法：

css({

   width:"100px",

   height:"100px"

})		修改css的样式
addClass(类名)修改css
toggleClass(类名)
jQuery的盒子模型

height()
innerHeight()  

--height+padding
outerHeight()

--height+padding+border

outerHeight(true)

--height+padding+border+margin
10,jQuery的元素遍历和过滤

向下遍历
children("名字")  ：向下遍历一级
find("名字")：可以一直向下遍历

向上遍历
parent("名字")：向上遍历一级
parents("名字")：向上遍历所有的
parentsUtil("名字")： 向上遍历一段区间中的

同级的遍历
siblings("名字"):　同级遍历所有的
next() ：直接的下一个
nextAll("名字")：下面的所欲的
snextUtils("p2"):下面的一段区间上的
pre(): 直接的上面的
preAll():直接上面
preUtils("p2"):直接上面的一段区间

过滤
first() :第一个
last() :最后一个
filter("标准") ：满足标注的元素
not("标注"):不满足标注的元素
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航