HTML学习笔记（8）- jQuery基础

一、认识jQuery语法：

        jQuery是一个开源的、轻量级的JavaScript脚本库。它将一些工具方法或对象方法封装在 类 库中，提供了强大的功能函数和丰富的用户界面设计能力。

       jQuery语法是为选取HTML元素而编制的，可以对元素执行某些操作，jQuery基本语法是：

  $(selector).action()

      其中，$表示jQuery， selector表示相应HTML元素， action表示执行对元素的某种操作。

       例如： $(“p”).hide()——隐藏所有段落                                  $(“#test”).hide()——隐藏所有id=test的元素

                   $(“#id_img”).attr("src)—获得元素的src 属性值          removeAttr（）是移除属性

例子：在图片上点击后在div中显示出图片的文件名

  



   
   
div_filename

效果：

  点击鼠标后       

二、CSS样式控制

（1）使用css() 方法获取CSS属性的语法如下：

值 = jQuery对象.css（属性名）；

         使用css() 方法设置CSS属性的语法如下：

jQuery对象.css（属性名，值）；

 （2）与CSS类别有光的方法

jQuery对象.addClass（className）  可以为匹配的HTML元素添加类别属性

例子：向第一个

元素添加一个类别“intro”

这是第一个段落。
这是第二个段落。
单击=添加类名

效果：

单击按钮后            

例子：用removeClass（）移除一个类别“intro”，并增加一个新的类别

关键语句：$("p:last").removeClass("intro").addClass("main");

这是第一个段落。
这是第二个段落。
修改第二个P元素的类名

效果：

单击按钮后    

另外还有两个常用的函数：

hasClass（）判断匹配的元素是否拥有指定的类别，如果有则返回True；

toggleClass（）执行类别转换操作，如果不存在则添加class类别，如果存在则删除这个class类别。

三、获取和设置HTML元素的尺寸

例：通过连个按钮获取HTML段落、文档的高度信息

   
   



   获取段落尺寸
   获取文档尺寸
     
   
 
             
   
用于测试尺寸的段落。
    

 效果：

                      

另外：offset()为元素在当前窗口中的相对偏移坐标         position()为 元素相对父类元素的偏移坐标

四、事件和event对象

例：通过鼠标移动事件获取鼠标位置坐标信息

例：通过使用bind方法给按钮绑定事件处理函数

效果：

点击一下鼠标后：

例：获取键盘按键的ASCII码

keydown()表示按下按键时触发事件              keyup()表示放开按键时触发事件

请随意键入一些字符：
    
当您在上面的框中键入文本时，下面的 div 会显示键位序号。
    

效果：  (event.which会显示ASCII码）

例 ：当鼠标指针进入、离开元素时改变元素的背景色

请把鼠标指针移动到这个段落上

 效果：

      移动后      

例：文档加载事件

 （1）load表示加载文档时触发      （2）ready表示所有文档加载完成时触发       （3）unload表示离开一个页面时触发

如：页面离开的时候弹出警告

当您点击 这个链接 时，会触发一个警告框。

效果：