jQuery框架学习笔记一

最新推荐文章于 2019-07-16 22:26:10 发布

hello_shilei

最新推荐文章于 2019-07-16 22:26:10 发布

阅读量541

点赞数

分类专栏：笔记文章标签： jquery javascript html

本文链接：https://blog.csdn.net/hello_shilei/article/details/49273339

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

hello_shilei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery框架学习笔记一

首先JQuery是什么？JQuery是JavaScript的函数库，它支持HTML元素的选取和操作，css操作，js特效操作，DOM遍历和修改,Ajax（可以实时的改变网页的内同）等。。。JQuery的使用也非常的简单1、jQuery选择器及常用事件$(document).ready(function(){ //页面加载完毕 //$("#btn1").cl
复制链接

扫一扫