jQuery框架学习笔记一

来源：互联网发布：阿尔法橱柜门板软件编辑：程序博客网时间：2024/05/16 03:11

首先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元素包括他里面的内容全部删除   })});

0 0