JQuery的介绍【一】

一.jQuery概述
1. 使用JS框架的好处:
jQuery是JS的一个框架,简化js的开发。类似于DbUtils与JDBC的关系
1). 程序员的开发效率会大大提升
2). 消除浏览器之间的差异,不同厂商的浏览器之间对JS的支持是不同。

2. 常见的JS框架:
jQuery框架只是众多JS框架中优秀的一个,JS框架多如牛毛。
如:dojo、prototype、easyui、extjs、dwr

3. jQuery框架特点:
1) 轻量级的框架
2) 兼容性好,兼容各大主流的浏览器。如:ie、chrome、firefox、opera、safari
3) 插件功能丰富,还有第三方厂商在jquery基础上再次开发新的功能。
4) 宗旨:write less do more

4. 轻量级框架的特点:
1). 学习和使用简单
2). 体积小
3). 占资源少,占用浏览器资源

5. 效果演示:
轮播、选项卡、菜单

二.jQuery的下载与导入
1. 官网:
www.jquery.com

2. 版本的介绍:
1) 对后台程序员来说,各个版本差别不大
2) 2.x开始不再支持IE 6/7/8 
3) min功能与正常的版本是一样的,没有换行,没有注释,大部分变量名都只有一个字母

3. 导入并测试是否成功:
     <!-- 导入js文件 -->
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {
                alert("Hello jQuery!");
            });
        </script>

三. jQuery对象与js对象之间的转换
1. 为什么要转换?
之前在JS中开发的时候,我们使用的都是JS对象。JS对象只能使用JS中的方法和属性。
而JQ中也有一套自己的方法,这些方法必须是JQ对象才可以调用。
所有我们需要将JS对象转成JQ对象,来调用JQ中的方法。

2. 转换语法:
1) js->jQuery:  $(js对象)
2) jQuery->js:  jq对象.get(0)  或  jq对象[0]
注:jq对象本质上是一个数组对象

3. 示例:页面上有一个文本框,文本框中有值:我是文本框内容
<input id="in" type="text" value="我是文本框内容" />
1) 分别通过js对象和jQuery对象得到值,并且alert显示出来
2) 混和使用是错误的,得不到效果
3) 对象转换以后使用各自的方法得到值

4. 代码:
       <script type="text/javascript">
            $(function() {
                
                //通过js对象
                document.getElementById("b2").onclick = function() {
                   // alert(document.getElementById("in").value);
                   //js->jq对象
                   alert($(document.getElementById("in")).val());
                };
                
                //通过jq对象
                $("#b1").click(function(){
                    //alert($("#in").val());
                    //jq -> js对象
                    alert($("#in")[0].value);
                });
            });
        </script>
    </head>
    <body>
            <input id="in" type="text" value="我是文本框内容" />
            <input type="button" id="b1" value="jq得到文本值" />
            <input type="button" id="b2" value="js得到文本值" />
    </body>

四、JS对象与jQuery对象的区别:
1. 事件的写法
1) 语法格式:
1.1) JS的按钮绑定事件
document.getElementById("b2").onclick = function() {
//代码
};

onclick是一个属性

1.2) JQ按钮绑定事件:
$("#b1").click(function() {
//代码
});

click是一个方法,方法的参数是要执行的代码
2. 加载完毕的区别
1) 加载方式
● JS写法
window.onload = function() {
}

● JQ写法:
$(function() {
});

$(document).ready(function(){
});

2) 效率
JQ效率更高,JQ只要当前网页中的内容全部加载完毕就可以执行。而JS要等到网页中的所有的内容和外部链接的其它资源
文件都加载完毕以后才运行。

3).加载次数:
JS只会运行最后一次方法,而JQ所有的加载函数都会执行。
        <script type="text/javascript">
            //jquery的加载方式,jQuery中每个函数都会执行
            $(function() {
                alert("Hello jQuery 1");
            });


            $(function() {
                alert("Hello jQuery 2");
            });
           
           /* 只有后面一个函数运行了 */
          /*
           window.onload = function() {
                alert("Hello JS 1");  
           };


           window.onload = function() {
                alert("Hello JS 2");  
           };
           */
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值