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

jQuery框架学习笔记一

2015-10-20 09:58 543 查看
首先JQuery是什么？

JQuery是JavaScript的函数库，它支持HTML元素的选取和操作，css操作，js特效操作，DOM遍历和修改,Ajax（可以实时的改变网页的内同）等。。。

JQuery的引入也非常的简单

<script src="jquery-2.1.4.min.js"></script>


1、jQuery选择器及常用事件

$(document).ready(function(){   //页面加载完毕
//$("#btn1").click(function(){  //id为btn1的标签的点击事件 执行function函数
//    alert("hello world!");  //弹出对话框
//});
//$("#btn1").dblclick(function(){  //id为btn1的标签的双击事件 执行function函数
//       alert("hello world!");  //弹出对话框
//});
// $("#btn1").mouseenter(function(){//鼠标移动到元素上边时触发的事件
//         $(this).hide();   //隐藏事件
//     }
// );
$("#btn1").mouseleave(function(){//鼠标从元素上方移开时触发的function
$(this).hide();   //隐藏事件
}
);
});
2、绑定事件
当代码特别多，事件特别多时 $("#btn1").click这种事件消耗内存比较大，所以推荐使用绑定事件
HTML代码
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">

js代码
$(document).ready(function(){
//$("#btn1").bind("click",clickHandler1);//绑定事件
//$("#btn1").bind("click",clickHandler2);
//$("#btn1").unbind("click");//解绑事件  在这一标签上的所有点击事件都将失效
//$("#btn1").unbind("click",clickHandler1);//解绑特定的事件

//1.7版本之后 推荐使用on off来绑定和解绑事件  和上边一个效果
$("#btn1").on("click",clickHandler1);
$("#btn1").on("click",clickHandler2);
$("#btn1").off("click");
$("#btn1").off("click",clickHandler1);
});
function clickHandler1(){
alert("第一个绑定事件");
}
function clickHandler2(){
alert("第二个绑定事件");
}

3、jQuery选择器和事件之事件目标和冒泡
html代码：
<div style="width: 500px; height: 500px; background-color: aqua">
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</div>
js代码：
$(document).ready(function(){
$("body").bind("click",bodyHandler);
$("div").bind("click",divHandler1);
$("div").bind("click",divHandler2);
});
function divHandler2(event){
conLog(event);

}
function divHandler1(event){
conLog(event);
//event.stopPropagation();//阻止事件向父控件传递
event.stopImmediatePropagation();//阻止一切事件
}
function bodyHandler(event){
conLog(event);
}

function conLog(event){
console.log(event);
}

4、jQuery之自定义事件
var ClickMeBtn;
$("document").ready(function(){
ClickMeBtn = $("#btn");  //简化代码
ClickMeBtn.click(function(){
var e = jQuery.Event("MyEvent"); //自定义事件
ClickMeBtn.trigger(e);
})
ClickMeBtn.bind("MyEvent",function(event){  //调用自定义事件
console.log(event);
})
});

5、jQuery之捕获
HTML代码

<p id="text">东软望海<a href="http://www.baidu.com">这是一个a标签</a></p>
<input type="button" id="btn1" value="按钮1">


js代码

$(document).ready(function(){
$("#btn1").click(function(){
//alert("text:"+$("#text").text());//获取id为#text里面的所有的文本
//alert("text:"+$("#btn1").val());//获取value属性
//alert("html:"+$("#text").html()); //获取id为#text里面的全部内容
alert("attr:"+$("a").attr("href"));//获取a标签内的href属性
});
})
6、jQuery之改变元素属性
HTML代码

<body>
<p id="p1">hello world</p>
<p id="p2">hello world</p>
<input type="text" id="i3" value="东软望海">

<br/>
<br/>
<input type="button" id="btn1" value="按钮1">
<input type="button" id="btn2" value="按钮2">
<input type="button" id="btn3" value="按钮3">

<a href="http://www.baidu.com">先是百度 后是新浪</a>
<button id="btn4">跳转</button>
<br/>
<br/>
<p id="p5">hello world</p>
<button id="btn5">按钮5</button>
</body>


js代码

$(document).ready(function(){
//$("#btn1").click(function(){
//    $("#p1").text("dongruanwanghai"); //改变id为#p1标签的text
//});
// $("#btn2").click(function(){
//$("#p2").html("<a href='http://www.baidu.com'>百度</a>");//插入一段HTML
//});

//$("#btn3").click(function(){
//    $("#i3").val("dongruanwanghai");//改变id为#i3的value属性
//});

//$("#btn4").click(function(){
//    //$("a").attr("href","http://www.sina.com.cn");  //改变标签a的href属性
//    $("a").attr({                         //同时改变a标签的好几个属性
//        "href":"http://www.sina.com.cn",
//        "title":"东软望海"
//    });
//});
$("#btn5").click(function(){
$("#p5").text(function(i,oldText){      //回调
return "old:"+oldText+"   new:这是新的内容"+i;
});
});
});


7、jQuery之添加内容和元素

html代码

<body>
<p id="p1">hello world</p>
<p id="p2">hello world</p>
<input type="button" id="btn1" value="按钮1">
<input type="button" id="btn2" value="按钮2">

<button onclick="addContent()">按钮3</button>
</body>


js代码

/**
* 添加内容和元素
* append 往后添加
* prepend 往前添加
* before 换行（上） 往后添加
* after 换行（下） 往后添加
*/
$(document).ready(function(){
//$("#btn1").click(function(){
//    //$("#p1").append("this is my webpage!");

//    $("#p1").prepend("this is my webpage!");
//});
//     $("#btn2").click(function(){
//        //$("#p2").before("thank you!");
//        $("#p2").after("thank you!");
//    });

});

function addContent(){
/**
* 三种方式
* HTML jQuery DOM
*/
var text1 = "<p>hello</p>"
var text2 = $("<p></p>").text("world");
var text3 = document.createElement("p");
text3.innerHTML="nihao";

$("body").append(text1,text2,text3);
}


8、jQuery之删除元素

HTML代码

<body>
<div id="div" style="width: 200px; height: 200px; background-color: aqua">
hello
<p>hello world</p>
<p>hello world</p>
</div>
<button id="btn">按钮</button>
</body>


js代码

/**
* 删除元素
* remove   empty
*/
$(document).ready(function(){
$("#btn").bind("click",function(){
$("#div").empty();    //div里面的元素都删除了
//$("#div").remove();  //div元素包括他里面的内容全部删除
})
});

                                            

                                        

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

                    

                    

                        

                         标签： 
                                                jquery
                                                javascript
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航