JQuery认识

    科技2022-07-11  80

    JQuery

    什么是jQuery

    它通过封装原生的 JavaScript 函数得到一整套定义好的方法。

    jQuery的作用

    1.像 CSS 那样访问和操作 DOM 2.修改 CSS 控制页面外观 3.简化 JavaScript 代码操作 4.事件处理更加容易 5.各种动画效果使用方便 6.让 Ajax 技术更加完美 7.基于 jQuery 大量插件 8.自行扩展功能插件

    Query的优点

    以更少的代码、实现更多的功能

    jQuery的引入方式

    本地引入(外链接) <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>网址引入 百度: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 又拍云: <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script> 新浪: <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> Google 谷歌 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> $(function(){})类似window.onload,告诉浏览器先加载html和css在加载js代码

    本地引入和网站的引入的区别:

    本地引入的优缺点: 优点: 1:本地引入JQ加载的时候速度更快. 2:本地引入更加稳定。 缺点: 1:但是会增加项目的体积,本地引入的库或者框架或者插架太多让网站打开速度变慢。

    网站引入的优缺点: 优点: 1:不必担心增加项目的体积。 缺点: 1:引入有时会不稳定。

    拓展:

    写法不同(参考4拓展html页面)

    jq库的版本:

    旧版本和新本版的问题。 旧版本更稳定,兼容性更好。 新版本只是增加了一些新的方法,最新版本不建议用,因为稳定性不好。 jq 2.0以上版本不在支持ie6/7/8浏览器。

    如果想了解学习jq,建议去jq官网自学API

    $==document.getElementById(); $('属性')

    本地引入JQ库

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">点击</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <!--我们本地引入JQ库就像引入本地js一样就行--> <script type="text/javascript"> // var obtn=document.getElementById('btn'); // btn.οnclick=function(){ // alert(1) // } $(function(){ $('#btn').click(function(){ alert(2) }) }) </script> </html>

    网站引入JQ

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button class="btn">点击</button> </body> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- 1:家里必须有网 --> <script type="text/javascript"> $('.btn').click(function(){ alert('你好') }) </script> </html>
    Processed: 0.019, SQL: 8