jQuery基础学习笔记(上)

最新推荐文章于 2019-04-19 11:48:31 发布

月迷津渡丶

最新推荐文章于 2019-04-19 11:48:31 发布

阅读量307

点赞数

分类专栏： Web 文章标签： jquery

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/43742831

版权

Web 专栏收录该内容

145 篇文章 0 订阅

订阅专栏

1.简介及语法

认识jQuery
1.jQuery:
jQuery库可以通过一行简单的标记被添加到网页中.
2.什么事jQuery:
jQuery是一个JavaScript函数库.
3.jQuery库包含的功能:
HTML元素选区
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX

Utilities

引入jQuery
1.网页中添加jQuery
1):从jquery.com下载jQuery库
2):从CDN中载入jQuery,从如Google中加载jQuery
a):百度和新浪的服务器存有jQuery
例如:http://libs.baidu.com/jquery/1.9.0/jquery.js
b):谷歌和微软
国内用不了
2:版本介绍:
V1.11.1:1.x支持IE6+
V2.1.1 :2.x支持IE9+ api想通
3. jquery.com

jQuery语法
1.jQuery语法:
基础语法:$(selector).action()
美元符号定义jQuery
选择符(selector)"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作
例如:
$(this).hide() - 隐藏当前操作
$("p").hide() - 隐藏所有段落

需要引入jquery-2.1.3.min.js

   <script src="../../jquery-2.1.3.min.js"></script>
  <!--  自己写的必须在jquery下面,因为从上向下引入-->
    <script src="app.js"></script>
</head>
<body>
    <p>hello1</p>
    <p>hello2</p>
    <p>hello3</p>
    <p>hello4</p>
</body>

$(document).ready(function () {
//    alert("文档加载完毕");
    $("p").click(function () {
        $(this).hide();
    })
})

2.选择器和事件

选择器:http://api.jquery.com/category/selectors/

<p class="pclass">p1</p>
<p id="pid">p2</p>
<button>按钮</button>

$(document).ready(function () {//文档加载完成
    $("button").click(function () {
//       $("p").text("元素选择器");
//       $("#pid").text("ID选择器");
        $(".pclass").text("类选择器");
    });
});

jQuery事件
1.jQuery事件:
常用事件方法
绑定事件
解除绑定事件
事件的目标
时间的冒泡
自定义事件

<button id="bt1">单击隐藏</button>
<button id="bt2">双击隐藏</button>
<button id="bt3">鼠标移上去隐藏</button>
<button id="bt4">鼠标移开隐藏</button>

$(document).ready(function () {
    $("#bt1").click(function () {//单击事件
       $(this).hide();
    });

    $("#bt2").dblclick(function () {//双击事件
       $(this).hide();
    });

    $("#bt3").mouseenter(function () {//鼠标移到按钮之上
       $(this).hide();
    });

    $("#bt4").mouseleave(function () {//鼠标移开
       $(this).hide();
    });
});

绑定、解除绑定事件
绑定 .bind() http://api.jquery.com/bind/
解除绑定 .unbind() http://api.jquery.com/unbind/
jQuery1.7后
.bind() --> .on()
.unbind() --> .off()

   <button id="clickMeBtn">按钮</button>

$(document).ready(function () {
 /*  $("#clickMeBtn").click(function () {//项目大时,不好
      alert(1);
   });*/

  /*  $("#clickMeBtn").bind("click",clickHandler1);
    $("#clickMeBtn").bind("click",clickHandler2);
//    $("#clickMeBtn").unbind("click");//事件全部解除
    $("#clickMeBtn").unbind("click",clickHandler2);//事件解除1个*/

    $("#clickMeBtn").on("click",clickHandler1);
    $("#clickMeBtn").on("click",clickHandler2);
//    $("#clickMeBtn").off("click");//事件全部解除
    $("#clickMeBtn").off("click",clickHandler2);//事件解除1个
});

function clickHandler1(e){
    alert("clickhandler1");
}function clickHandler2(e){
    alert("clickhandler2");
}

事件之事件目标与冒泡

   <div style="width: 300px;height: 300px;background-color: aqua">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </div>

$(document).ready(function () {
    $("body").on("click", bodyHandler);
    $("div").on("click", divHandler);
});

function bodyHandler(e) {
    alert(e);
}

function divHandler(e) {
    alert(1)
    e.stopPropagation();//阻止父级事件
    e.stopImmediatePropagation();//阻止所有事件,除了自己
}

事件之自定义事件

    <button id="ClickMeBtn">按钮</button>

var ClickMeBtn;

$(document).ready(function () {
    ClickMeBtn = $("#ClickMeBtn");
    ClickMeBtn.click(function () {
        var e = jQuery.Event("MyEvent");
        ClickMeBtn.trigger(e);
    });

    ClickMeBtn.on("MyEvent", function (e) {
        alert(e);
    })
});

3.隐藏与显示、淡入淡出、滑动、回调

1.隐藏与显示

   <p>HELLO</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <br>
    <button id="hideorshow">隐藏/显示</button>
    <hr>
    <script>
        for(var i=0;i<5;i++){
            $("<div>").appendTo(document.body);
        }
        $("div").click(function () {
            $(this).hide(2000, function () {
                $(this).remove();//移除当前对象
            });
        });
    </script>

div{
    background: #ffff00;
    width: 30px;
    height: 50px;
    margin: 2px;
    float: left;
}

$(document).ready(function () {
    $("#hide").click(function () {
        $("p").hide(1000);//1s动画
    });

    $("#show").on("click",showp);

    $("#hideorshow").on("click",hideorshow)
});

function showp(){
    $("p").show(1000);
}

function hideorshow(){
    $("p").toggle(1000);//   隐藏/显示切换
}

2.淡入淡出

<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="fadetoggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="div1" style="display: none; width: 80px;height: 80px;background-color: orange"></div>
<div id="div2" style="display: none;width: 80px;height: 80px;background-color: blue"></div>
<div id="div3" style="display: none;width: 80px;height: 80px;background-color: red"></div>

$(document).ready(function () {
    $("#fadein").on("click", function () {
        $("#div1").fadeIn(1000);//淡入
        $("#div2").fadeIn(1000);
        $("#div3").fadeIn(1000);
    })
    $("#fadeout").click(function () {
        $("#div1").fadeOut(1000);//淡出
        $("#div2").fadeOut(1000);
        $("#div3").fadeOut(1000);
    });

    $("#fadetoggle").on("click",fadetoggle);
    $("#fadeto").on("click", function () {
        $("#div1").fadeTo(1000,0);//执行时间,透明度
        $("#div2").fadeTo(1000,0.7);//0 完全透明
        $("#div3").fadeTo(1000,1);//1 完全不透明
    })
});

function fadetoggle(){
    $("#div1").fadeToggle(1000);//  淡入淡出  隐藏/显示   开关
    $("#div2").fadeToggle(1000);
    $("#div3").fadeToggle(1000);
}

3.滑动

<style>
        #content,#flipShow,#fliphide,#flip2{
            padding: 5px;
            text-align: center;
            background-color: #ffff00;
            border: solid 1px orange;
        }
        #content{
            padding: 50px;
            display: none;
        }
    </style>

<body>
    <div id="flipShow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="flip2">出现/隐藏</div>
    <div id="content">HELLO HI!</div>
</body>

$(document).ready(function () {
    $("#flipShow").click(function () {
       $("#content").slideDown(1000);//划出
    });

    $("#fliphide").on("click",fh);

    $("#flip2").on("click", function () {
        $("#content").slideToggle(1000);//出现/隐藏切换
    });
});

function fh(){
    $("#content").slideUp(1000);//滑动隐藏
}

4.回调

<button>按钮</button>
<p id="p1">hellow world1</p>
<p id="p2">hellow world2</p>

$(document).ready(function () {
    $("button").click(function () {
        $("#p1").hide(1000, function () {//隐藏完成后执行
            //     alert("回调");
        });

//        $("#p2").css("color","red");//直接变色
        $("#p2").css("color", "red").slideUp(1000).slideDown(1000);

    });
});

4.捕获、设置、元素添加、元素删除

1.HTML-捕获

<p id="text">this is my webpage<a>a标签</a></p>
<button id="btn1">按钮</button>
<hr>
<p><input type="text" id="it" value="moia"></p>
<hr>
<p><a href="http://www.baidu.com" id="aid">百度</a></p>

$(document).ready(function () {
    $("#btn1").on("click", function () {
        //      var i = $("#text").text();//this is my webpagea标签
        //       var i = $("#text").html();//this is my webpage<a>a标签</a>
        //.html可以获取标签,.text智能获取内容
        //       var i = $("#it").val();
        //       var i = $("#aid").href;//无效
        var i = $("#aid").attr("href");
        alert(i);
    });
});

2.HTML-设置

<p id="p1">HELLO</p>
<button id="btn1">按钮</button>
<hr>
<p id="p2">WORLD</p>
<button id="btn2">按钮</button>
<hr>
<input type="text" id="i3" value="hehe">
<button id="btn3">按钮</button>
<hr>
<a id="aid" href="http://www.baidu.com">百度->bing</a>
<button id="btn4">按钮</button>
<hr>
<p id="p5">hello</p>
<button id="btn5">按钮</button>

$(document).ready(function () {
    $("#btn1").click(function () {
        $("#p1").text("修改成这个内容");
    });

    $("#btn2").on("click", function () {
        $("#p2").html("<a href='http://www.baidu.com'>.html可以加标签</a>")
    });

    $("#btn3").on("click",func3);

    $("#btn4").click(function () {
 //      $("#aid").attr("href","http://www.bing.com")//修改
       $("#aid").attr({
           "href":"http://www.bing.com",
           "title":"hello"
       })//修改多个
    });
    
    $("#btn5").click(function () {//回调函数
        $("#p5").text(function (i,ot) {//当前元素下标,内容
            return "old:"+ot+" new:新内容"+(i);
        })
    });
});

function func3(){
    $("#i3").val("改成这个");
}

3.HTML-添加元素

<p id="p1">hello</p>
<button id="btn1">append</button>
<button id="btn2">prepend</button>
<button id="btn3">before</button>
<button id="btn4">after</button>
<button id="btn5">按钮</button>

/*append //在被选择元素的结尾插入
prepend //在被选择元素的开头插入
before  //被选择元素之前
after //被选择元素之后*/

$(document).ready(function(){
    $("#btn1").click(function () {
        $("#p1").append("append")
    });
    $("#btn2").click(function () {
        $("#p1").prepend("prepend");
    });
    $("#btn3").click(function () {
        $("#p1").before("before");
    });
    $("#btn4").click(function () {
        $("#p1").after("after");
    });
    $("#btn5").on("click",appendText);
});


function appendText(){
  /*  html
    jQuery
    js(DOM)*/
    var text1 = "<p>HTML</p>"
    var text2 = $("<p></p>").text("jQuery");
    var text3 = document.createElement("p");
    text3.innerHTML = "DOM"
    $("body").append(text1,text2,text3);
};

4.HTML-删除元素

<p id="pid">hello</p>
<button id="btn1">删除</button>
<hr>
<div id="div" style="width: 200px;height: 200px;border: 1px solid #000000;background-color: #ffff00 ">
hello
<p id="p2">hello2</p>
<p>hello3</p>
</div>
<button id="remove0">remove</button>
<button id="empty0">empty</button>

//remove   empty
$(document).ready(function () {
    $("#btn1").click(function () {
        //$("#pid").remove();
        $("#pid").empty();
    });
    $("#remove0").click(function () {
        $("#div").remove();//全部删除
    });
    $("#empty0").click(function () {
        $("#div").empty();//只删除里面的子元素
    });
});

月迷津渡丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础学习笔记(上)

1.简介及语法认识jQuery1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中.2.什么事jQuery: jQuery是一个JavaScript函数库.3.jQuery库包含的功能: HTML元素选区 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画
复制链接

扫一扫