jquery的第一种引入方式:使用cdn在线引用
网络上的在线的一个jQuery类库(百度静态资源库:cdn.code.baidu.com)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery的二种引入方式</title> <!--<!–jquery的第一种引入方式:使用cdn在线引用 网络上的在线的一个jQuery类库(百度静态资源库:cdn.code.baidu.com)–>--> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> // window.onload:在页面元素全部加载完后自动调用的事件 ===$(document).ready(function(){}) // $(document).ready(function(){})的简写 $(function () {}) $(function () { $('h2').css('background','yellow') }) </script> </head> <body> <h2>jQuery的第一种引入方式(使用cdn在线引用)</h2> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
jquery的第二种引入方式:本地引用
在jquery官网下载(jquery.com)jquery文件到本地,复制到网站根目录,再用script标签引用即可
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery的二种引入方式</title> <!--jquery的第二种引入方式:本地引用 在jquery官网下载jquery文件到本地,复制到网站根目录,再用script标签引用即可--> <script src="../jquery/jquery-3.2.1.min.js"></script> <script> $(function () { $('h2').css('background','green') }) </script> </head> <body> <h2>jQuery的第二种引入方式(本地引用)</h2> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
如何使用css的语法来选择元素?
jquery基本语法:$('选择器').css('属性','值')
jQuery是什么?
就是一个javascript的类库,函数库
我们为什么要学jQuery?
a:各个浏览器之间的兼容性
b:jquery:写的更少,做的更多
c:为看懂其它程序猿的代码,也必须掌握它jquery 的编程思想:查询+操作,内置循环,迭代
jquery基本语法:例:$('选择器').方法()在jquery对象上不能直接调用DOM方法,jquery是一个DOM对象的数组
jQuery对象与DOM对象之间的转换方法,举例?
jQuery对象是包装DOM对象后产生的,但是两者却不能混用,DOM对象才能使用DOM方法,jQuery对象才能使用jQuery方法
jQuery对象转成DOM对象:
(1)jQuery对象实际上是一个数据对象,可以通过[index]方法获得相应的DOM对象。
如:var $v=$("#v"); //得到jQuery对象
var v=$("v")[0];//转换成DOM对象
(2)jQuery本身可以通过.get(index)方法得到相应的DOM对象
如:var $v=$("#v"); //得到jQuery对象
var v=$v.get(0);
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()将DOM对象包装起来,就能获得jQuery对象了
如:var v=document.getElementById("v"); //得到DOM对象
var $v=$(v); //转成jQuery对象
转换后,就可以任意使用jQuery的方法了
以下方法都正确:
$("#div").html();
$("#div")[0].innerTHML;
$("#div").eq(0)[0].innerHTML;
$("#div").get(0).innerHTML;
$(document.getElementById("div")).html()
平时在使用过程中可以在变量前面加$以区分DOM对象和jQuery对象,添加$的为jQuery对象,没有的则为DOM对象
效果图: