jQuery入门

来源：互联网发布：ubuntu离开root 编辑：程序博客网时间：2024/06/05 04:17

什么是jQuery ?

JS库，JS框架
框架：半成品。一半已经完成，一半未完成，就像填空题。
JS框架：相当于一些现成的函数和对象的集合，直接拿来用就好了。
常见的JS库还有：Prototype、Ext JS、Dojo、MooTools、YUI等等。

jQuery的口号：write less,do more.

怎么用？

下载jQuery 官方网站 http://jquery.com/

最新版v3.1.0

jquery-2.1.4.js(未压缩版)
jquery-2.1.4.min.js(压缩版)

未压缩版: 开发、学习、调试时用
压缩版: 项目正式运行的时候使用,可以减少带宽,提高项目的性能，

1.引入jquery-2.1.4.js

<script type="text/javascript" src="jquery-2.1.4.js"></script>

2.从下面的语句开始
//ready方法的作用是当页面中的DOM加载完后执行参数中的函数
$(document).ready(function(){
alert(“Hello World!”);
});

DOM对象和jQuery对象的转化

1.dom对象—–>jQuery对象
$(DOM对象)：是把dom对象转化成jQuery对象

演示：

var div1 = document.getElementById("div1");                var $div1 = $(div1);                console.dir($div1);                alert($div1.html());//div1.innerHTML

jQuery 对象实质是map、关联数组
DOM对象是存到jQuery对象的第一个元素中
使用console.dir打印jQuery对象，发现dom在jQuery的下标为0的位置。

使用数组模拟jQuery对象：

var div1 = document.getElementById("div1");                var $jQuery = {};                var arr = [div1,2,3];                Array.prototype.aaa = "111";                Array.prototype.get = function(i){                    return this[i];                }                var haha = arr.get(0);

2.把jQuery对象转化成dom对象

var $div = $("#div1");

                //第一种方式//              var div = $div[0];                //第二种方式//              var div = $div.get(0);//              alert(div.innerHTML);变量定义的规范:jQuery对象 前面要加$,dom对象不用加$

$(document).ready()和window.onload()的区别

区别1：load只能绑定一个事件，如果绑定多个，只有最后一个起作用；ready可以绑定多个事件，都起作用。
区别2：onload需要等待所有对象（dom及其关联对象）全部加载完才执行，效率低；ready()只需等待所有的dom结构加载完就可以执行，效率高。
测试两种方法的加载时间：

第一种:
console.time(“test”);

        window.onload = function(){            console.timeEnd("test");                alert('test');        }

console.time(“test”);
$(document).ready(function(){

            console.timeEnd("test");            alert('test');        });

(3)简写
window.onload 无

$(document).ready(function(){

});

可以简写成
$().ready(function(){
});

也可以简写成
$(function(){

});

绑定事件函数

示例：给按钮绑定单击事件

js代码：<script type="text/javascript">            $(function () {                $("#btn1").click(function () {                    alert('你好');                });            });        </script>html代码：<input type="button" name="btn1" id="btn1" value="点我" />

修改单一样式

示例：修改div块的背景颜色

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(function () {//              $("#div1").css("background-color","blue");//既读又写                //读                var $bgc = $("#div1").css("background-color");                alert($bgc);//rgb(255,255,0)                //写//              $("#div1").css("background-color","blue");            });        </script>    </head>    <body>        <div id="div1" style="width:200px;height:200px;background-color: yellow;">            我是div1        </div>    </body></html>

这里写图片描述

阅读全文

0 0