欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery----初识jQuery

程序员文章站 2022-04-13 15:49:47
一、jQuery好处: ①写得少,做的多 ②链式编程 ③隐式迭代 ④解决兼容性问题 二、*对象 Dom中的*对象:document >页面中的*对象 document.点出来的是Dom中的属性和方法 Bom中的*对象:window >浏览器中的*对象 window.点出来的是浏览器的属性和 ......

一、jquery好处:

①写得少,做的多

②链式编程

③隐式迭代

④解决兼容性问题

 

 

二、*对象

dom中的*对象:document------>页面中的*对象

document.点出来的是dom中的属性和方法

bom中的*对象:window-------->浏览器中的*对象

window.点出来的是浏览器的属性和方法,window.document也可以点出来,document也属于window

jquery中的*对象:jquery------>$

$点出来的是jquery中的方法

 

 

三、加载事件

页面加载事件有如下几种写法:

a.window.onload=function(){ } ------>js中页面加载事件,只能写一次,如果写多个,后面的会把前面的覆盖

b.$(window).load( function(){ } )------>jquery页面的加载事件,与a中代码作用相同,可以写多个

上述a和b两种页面加载方式,是页面中所有内容加载完毕后才触发,加载内容指的是:标签、文本内容、图片......等

c.$( document ).ready( function(){ });------>jquery页面的加载事件

c方法比a和b方法的执行速度快很多,因为c的执行逻辑是把页面的基本标签加载完毕后就可以触发了。

c也可以写作  $( function(){ })

 

 

四、jquery中引入文件注意问题

先引入文件,然后再使用,开发的时候引入正常的jquery文件和压缩版的文件都没有问题

建议:开发引入普通版文件,上线后使用压缩版。

 

 

五、jquery元素与dom元素的互换

(一)为什么jquery对象和dom对象要互转?

    dom对象转jquery对象操作方便,毕竟jquery中方法都是封装好了的,而且兼容问题解决的很好,代码少,方便.

              jquery对象转dom对象,因为jquery中文件一直在更新,很多东西都是随着使用而进行封装和升级,不太可能把所有dom中用到的进行封装,还有很多未知的兼容问题没有封装进去,所以,有的时候jquery中不能解决的问题,还需要原生的js代码来解决,所以,jquery对象有的时候需要转成dom对象来进行。

(二)jquery对象和dom对象怎么转换?

dom对象---------->jquery对象

      $(dom对象)

jquery对象---------->dom对象

      $(“#btn“)[0]

      $(“#btn“).get(0)

 

六、开关灯示例

示例要求:点击按钮开关,网页实现开灯关灯效果

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>网页开关灯</title>
 6         <!-- js效果 -->
 7         <script type="text/javascript">
 8 //             window.onload=function(){
 9 //                 var btn=document.getelementbyid('btn');
10 //                 btn.onclick=function(){
11 //                     //首先判断按钮是开灯还是关灯
12 //                     if(this.value=="开灯"){
13 //                         this.value="关灯";
14 //                         document.getelementsbytagname("body")[0].style.backgroundcolor="white";
15 //                     }else{
16 //                         this.value="开灯";
17 //                         document.getelementsbytagname("body")[0].style.backgroundcolor="black";
18 //                     }
19 //                 }
20 //             }
21         </script>
22         
23         <!-- jquery效果 -->
24         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
25         <script type="text/javascript">
26             $(function(){
27                 $("#btn").click(function(){
28                     if($(this).val()=="关灯"){
29                         //.val()方法---->获取按钮的value属性的值
30                         //.val("内容");---->设置按钮的value属性的值
31                         $(this).val("开灯");
32                         $("body").css("backgroundcolor","black");
33                     }else{
34                         $(this).val("关灯");
35                         $("body").css("backgroundcolor","white");
36                     }
37                 });
38             })
39         </script>
40     </head>
41     <body>
42         <input type="button"  id="btn" value="关灯" />
43     </body>
44 </html>