jQuery学习笔记一——jQuery中与JavaScript的语法区别

一、jQuery与DOM必须分清的几个知识点 
1.window.onload与$(documnet).ready()的区别 
window.onload只能调用一次，必须等待网页中所有内容加载完毕后才能执行

window.onload = fuction(){
    alert("test");
};
window.onload = fuction(){
    alert("test2");
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

只能输出一个test信息的提示框

而Jquery中的(documnet).ready()方法能够调用多次，网页中所有DOM结构绘制完毕后就可以执行，可能DOM元素关联的东西并没有加载完毕，简写：(function(){});

$(document).ready(function(){
    alert("hello");
});

$(document).ready(function(){
    alert("hello2");
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

以上代码都能执行，输出两个消息提示框

2.一个简单的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title> 
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        <!--定义id选择器，菜单，宽度300px-->
        #menu 
        {
            width : 300px;
        }
        <!--定义类选择器，菜单目录，背景颜色，字体颜色白色，在该区域时鼠标指针形状-->
        .has_children{
            background : #555;
            color : #fff;
            cursor : pointer;
        }
        <!--定义类选择器高亮：字体颜色白色，背景颜色绿色-->
        .highlight{
            color : #fff; 
            background : green;
        }
        <!--定义标签选择器div，padding内边距为0，与上一层标签外边距10px-->
        div {
    padding: 0px;
    margin: 10px;
}
    <!--定义联合标签选择器 div标签 下的a标签属性:背景颜色，不显示，在左边符上，宽度300px-->
    div a {
    background: #888;
    display: none;
    float: left;
    width: 300px;
}
    </style>
  </head>

  <body>
      <form action="">
        <p>
            <label>Username:<input name="search" type="text" id="search"/></label>
        </p>
        <script type="text/javascript">
            document.getElementById('search').focus()
        </script>
        <script src="jquery-1.11.3.js" type="text/javascript">
        </script>

    </form>
    <div id="menu">
        <div class="has_children">
            <span>第1章-认识Jquery</span>
            <a>1.1-JavaScript和JavaScript库</a>
        </div>
    </div>
  </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

获取id为foo的元素内的html代码: 
jquery中获取的方式 
$(“#foo”).html() 
DOM中获取的方式 
var domObj = document.getElementById(“id”); 
var ObjHtml = domObj.innerHTML;

3.如何让jQuery对象与DOM对象相互转换

3.1jquery对象转换为DOM对象

var $cr = $("#cr");
var cr = $cr.get(0); //方式一
var cr = $cr[0];//方式二
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

3.2DOM对象转换为jquery对象

var cr = document.getElementById("cr");
var $cr = $(cr);
  • 1
  • 2
  • 1
  • 2

4.注意 
jquery对象不能调用DOM对象的方法，DOM对象的方法不能调用jquery对象的方法 
平时用到的JQuery对象都是通过$()函数制造出来的，这个函数就是一个jquery对象的制造工厂。

二、解决jQuery库和其他库的冲突 
分情况解决冲突，一个是jQuery库在其他库之前声明，一个是jQuery库在其他库之后声明 
1.JQuey库在其他库之后导入 
关键代码：解决方案一

    <script src="prototype-1.6.0.3.js" type="text/javascript">
        </script>
        <script src="jquery-1.11.3.js" type="text/javascript">
        </script>

    jQuery.noConflict();//将变量$的控制权移交给prototype.js
    jQuery(function(){//使用jQuery
        jQuery("p").click(function(){
        alert(jQuery(this).text());
    })

})
$("pp").style.display = 'none';//使用prototype

<p>test---jquery</p>
<p id="pp">test-prototype</p>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

关键代码：解决方案二：自定义一个快捷方式

var $j = jQuery.noConflict();//自定义一个快捷方式
  • 1
  • 1

如果不想给JQuery自定义这些备用名称，还想使用而不管其他库()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法： 
方法一

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){//使用jQuery设定页面加载时执行的函数
    $("p").click(function(){//在函数内部继续使用$()方法
    alert($(this).text());
    })
})

    $("pp").style.display = 'none';//使用prototype
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

方法二

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){	//定义匿名函数并设置形参为$
    $(function(){//匿名函数内部的$均为jQuery
    $("p").click(function(){//继续使用$()方法
        alert($(this).text());
    });
   });
})(jQuery);$("pp").style.display = 'none';//使用prototype
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

应该是最理想的方法，因为可以通过改变最少的代码来实现全面的兼容性

2.jQuery库在其他库之前导入 
无需调用noConflict()函数

jQuery(function(){//直接使用jQuery
        jQuery("p").click(function(){
        alert(jQuery(this).text());
    })

})
$("pp").style.display = 'none';//使用prototype
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.下载插件地址 
xtnd.us/dreamweaver/jquery,下载jquery插件

posted @ 2017-01-12 11:14  天涯海角路  阅读(108)  评论(0)    收藏  举报