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

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

window.onload = fuction(){
    alert("test");
};
window.onload = fuction(){
    alert("test2");
};

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

而Jquery中的 (documnet).ready()DOMDOM西 (function(){});

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

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

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

2.一个简单的例子


<html>
  <head>
    <title>MyHtml.htmltitle> 
    
    <style type="text/css">
        --定义id选择器,菜单,宽度300px-->
        #menu 
        {
            width : 300px;
        }
        --定义类选择器,菜单目录,背景颜色,字体颜色白色,在该区域时鼠标指针形状-->
        .has_children{
            background : #555;
            color : #fff;
            cursor : pointer;
        }
        --定义类选择器高亮:字体颜色白色,背景颜色绿色-->
        .highlight{
            color : #fff; 
            background : green;
        }
        --定义标签选择器divpadding内边距为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章-认识Jqueryspan>
            <a>1.1-JavaScript和JavaScript库a>
        div>
    div>
  body>
html>

获取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];//方式二

3.2DOM对象转换为jquery对象

var cr = document.getElementById("cr");
var $cr = $(cr);

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

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

    
        

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

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

test---jquery

"pp">test-prototype

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

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

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

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

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

方法二

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

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

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

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

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

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

你可能感兴趣的:(jQuery)