JQuery入门第一课

概念: 一个JavaScript框架。简化JS开发
    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
    jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
 
    jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
 
    JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已
 
    JQuery的功能:
* HTML 元素选取
* HTML 元素操作
* CSS 操作
* HTML 事件函数
* JavaScript 特效和动画
* HTML DOM 遍历和修改
* AJAX
* Utilities
 

JQuery版本介绍

First

 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,

                     功能不再新增。因此一般项目来说,使用1.x版本就可以了,

                     最终版本:1.12.4 (2016年5月20日)

Second

  2.x:不兼容ie678,很少有人使用,官方只做BUG维护,

                     功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,

                     最终版本:2.2.4 (2016年5月20日)

Third

3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,

                     一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。

                     目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)

 

JQuery下载:

1.下载jQuery各个版本的页面:http://www.jb51.net/zt/jquerydown.htm1

百度云:链接:https://pan.baidu.com/s/1Yy30LnOKMVFYfTRuLZ9sPQ   提取码:00qh

2.官网:https://jquery.com/

3.注意:jquery-xxx.js 与 jquery-xxx.min.js区别:

                1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些

                2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快

 

JQuery快速入门:

①导入min.js文件

②使用(鄙人使用的是3.3.1版本,如果各位看官也想一起学习请使用同版本JQuery)

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
</body>
<script>
    //使用JQuery获取元素对象
    var div1 = $("#div1");
    alert(div1.html())
    var div2 = $("#div2");
    alert(div2.html());
</script>
</html>

 

JQuery对象与JS对象的区别:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象和Js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <p id="p1">p1...</p>
    <p id="p2">p2...</p>

</body>

<script>

    //1.通过js方式获取名称叫div的HTML所有元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs);    //返回object  HTMLCollection

    //对div中所有div进行遍历,改变内容为aaa
    for(var i=0;i<divs.length;i++){
        divs[i].innerHTML="aaa";
    }

    //2.通过Jq方式获取名称叫p的HTML所有元素对象
    var $ps = $("p");
    alert($ps);   //返回object对象    两者都可以当做数组使用

    //对ps中所有p进行遍历,改变内容为bbb
    $ps.html("bbb");

</script>
</html>

运行结果:

JQuery对象与JS对象的相互转换:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象和Js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <p id="p1">p1...</p>
    <p id="p2">p2...</p>

</body>

<script>

    //1.通过js方式获取名称叫div的HTML所有元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs);    //返回object  HTMLCollection

    //对div中所有div进行遍历,改变内容为aaa
    for(var i=0;i<divs.length;i++){
       $(divs[i]).html("ccc");     //js---》jq
    }

    //2.通过Jq方式获取名称叫p的HTML所有元素对象
    var $ps = $("p");
    alert($ps);   //返回object对象    两者都可以当做数组使用

    //对ps中所有p进行遍历,改变内容为bbb
    //$ps.innerHTML = "bbb";  JQuery对象不能直接当成JS对象使用
    $ps[0].innerHTML = "ddd";     //jq----》js
    $ps.get(1).innerHTML = "eee";

</script>

</html>

运行结果:

 

JQuery事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-JQuery事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">
</body>

<script>

// 给按钮添加单击事件

    $("#b1").click(function () {     
        alert("abc");
    });
</script>
</html>

运行结果:

JQuery入口事件:

window.onload 和$(function() {}) 的区别
            window.onload在一个html中只能定义一次,如果定义多次,将会被最有一次覆盖所有前面的
            $(function)可以定义多次

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-JQuery事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
$(function () {
    alert("258");
})
$(function () {
    alert("0258");
})
    </script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">
</body>
</html>

 

运行结果:

 

JQuery样式控制:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-JQuery事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

$(function () {
    //样式控制
    //方式一
    $("#div1").css("background-color","red");
    //方式二
    $("#div2").css("backgroundColor","pink");
})

    </script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">
</body>
</html>

 

运行结果:

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章