官网下载后,复制到当前WEB项目的js文件夹下,如下:

引入代码:<script type=”text/javascript”
src=”../../js/jquery-1.8.3.js”></script>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>DOM对象与Jquery对象转换</title>
 6         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 7         <script>
 8             function write1(){
 9                 //1.JS的DOM操作,DOM对象无法操作JQ对象里面的属性和方法
10                 document.getElementById("span1").innerHTML="萌萌哒!";
11                 //document.getElementById("span1").html("萌萌哒!");
12                 
13                 var spanEle=document.getElementById("span1");
14                 
15                 //5.将DOM对象转换成JQuery对象
16                 $(spanEle).html("胖胖哒!");
17             }
18             
19             $(function(){
20                 $("#btn").click(function(){
21                     //2.JQ的JQuery操作,JQ对象无法操作JS里面的属性和方法!!!
22                     //$("#span1").innerHTML="呵呵哒!"
23                     $("#span1").html("呵呵哒!");
24                 
25                     //3.JQuery对象向DOM对象转换方式一
26                     $("#span1").get(0).innerHTML="美美哒!";
27                     
28                     //4.JQuery对象向DOM对象转换方式二
29                     $("#span1")[0].innerHTML="棒棒哒!";
30                 });
31             });
32         </script>
33     </head>
34     <body>
35         <input type="button" value="JS写入" onclick="write1()"/>
36         <input type="button" value="JQ写入" id="btn"/><br />
37         男神:你好帅!
38     </body>
39 </html>

威尼斯人线上娱乐 1

JS:document.getElementById();

3、JS和JQ方式获取的区别

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>JS与JQ页面加载的区别</title>
 6         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 7         <script>
 8             window.onload=function(){
 9                 alert("张三");
10             }
11             //传统的页面加载会存在覆盖问题,加载比JQ慢(整个页面加载完毕(包括里面的其他内容,比如图片))
12             window.onload=function(){
13                 alert("李四");
14             }
15             
16             //JQ的加载比JS加载要快!(当整个dom树结构绘制完毕就会加载)
17             jQuery(document).ready(function(){
18                 alert("王五");
19             });
20             
21             //JQ不存在覆盖问题,加载的时候是顺序执行
22             $(document).ready(function(){
23                 alert("苏牧")
24             });
25             
26             //简写方式
27             $(function(){
28                 alert("汾九");
29             });
30         </script>
31     </head>
32     <body>
33     </body>
34 </html>

1、jQuery基础

jquery-1.8.3.min.js:用于项目使用阶段

传统的JavaScript页面加载函数是最后一个生效,它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】

jQuery的页面加载函数可以存在多个(不会发生覆盖),它会按照顺序进行执行。【dom数加载完成】

案例事先要创建一个名为“惊喜”的HTML文件,并放在同一个文件夹下。

威尼斯人线上娱乐,JQ:$(“#id”);

4、DOM对象和JQuery对象的转换

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>JS和JQ获取的区别</title>
 6         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 7         <script>
 8             $(function(){
 9                 //1.JS方式获取
10                 /*document.getElementById("btn").onclick=function(){
11                     location.href="惊喜.html"
12                 }*/
13                 //2.JQ方式获取
14                 $("#btn").click(function(){
15                     location.href="惊喜.html"
16                 });
17             });
18         </script>
19     </head>
20     <body>
21         <input type="button" value="点我有惊喜!" id="btn" />
22     </body>
23 </html>

注意:JQ对象只能操作JQ里面的属性和方法

2、JS和JQ页面加载的区别

Jquery它是一个库(框架),要想使用它,必须先引入!

       JS对象只能操作JS里面的属性和方法。

jquery-1.8.3.js:一般用于学习阶段。