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

最新推荐文章于 2020-08-06 17:06:31 发布

向着阳光奔跑的少年

最新推荐文章于 2020-08-06 17:06:31 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： jquery dom javascript

本文链接：https://blog.csdn.net/li286487166/article/details/51163977

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

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>

获取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库在其他库之后导入
关键代码：解决方案一

    <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>

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

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插件

向着阳光奔跑的少年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery学习笔记一——jQuery中与JavaScript的语法区别

一、jQuery与DOM必须分清的几个知识点 1.window.onload与$(documnet).ready()的区别 window.onload只能调用一次，必须等待网页中所有内容加载完毕后才能执行window.onload = fuction(){ alert("test");};window.onload = fuction(){ alert("test2");}
复制链接

扫一扫

专栏目录