jQuery简介

Posted 2021-04-08 Java语言和前端技术学习

一.jQuery简介

    1.jQuery由美国人John Resig于2006年创建。

    2.jQuery是目前最流行的javascript程序库，它是对JavaScript对象和函数的封装。

    3.它的设计思想是write less,do more

二.初始jQuery

    实现隔行变色效果，只需一句关键代码：$("tr:even").css("background-color","#ccc")。

三.jQuery能做什么

      1. 访问和操作DOM元素

      2. 控制页面样式

      3. 对页面事件进行处理

      4. 扩展新的jQuery插件

      5. 与Ajax技术完美结合

    提示：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。

四.jQuery的优势

      1. 体积小，压缩后只有100KB左右

      2. 强大的选择器

      3. 出色的DOM封装

      4. 可靠的事件处理机制

      5. 出色的浏览器兼容性

      6. 使用隐式迭代简化编程

      7. 丰富的插件支持

五.获取jQuery：进入jQuery官网：http://jquery.com

六.jQuery库文件

    1.jQuery库分开发版和发布版

    2.在页面中引入jQuery：

        <script  src="js/jquery-1.8.3.js"  type="text/javascript"></script>

七.jQuery基本语法

    使用jQuery弹出提示框

    <script>

        $(document).ready(function() {

        });

    </script>

八.DOM模型

     浏览器把html文档的元素转换成节点对象，所有节点组成了一个树状结构，如下图

九.节点类型

     1.元素节点：文档中的所有元素：<h2>……</h2>。      

     2.文本节点：元素节点内的文本内容：<p>你最喜欢的食品是</p> 。

     3.属性节点：元素节点的子节点：<p title="提示">……</p> 。     

十.DOM对象和jQuery对象

     1.DOM对象：直接使用JavaScript获取的节点对象 。示例：

 var objHTML=obj DOM.innerHTML; 

 var objDOM=document.getElementById("title")。

     2.jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法：$("#title").html( );等同于document.getElementById("title").innerHTML。

     3.特别提示：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用。

十一.jQuery语法结构

    语法：$(selector).action() ;

    ①工厂函数$()：将DOM对象转化为jQuery对象

    ②选择器 selector：获取需要操作的DOM 元素

    ③方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法。

    示例：$("#current").addClass("current")。    

十二.jQuery代码风格

     1.“$”等同于“ jQuery ”，示例：$(document).ready()=jQuery(document).ready();

$(function(){...})=jQuery (function(){...})。

     2.操作连缀书写，示例：

          $("h2").css("background-color","#CCFFFF")

          .next().css("display","block")。

十三.常用语法举例

      1.css("属性","属性值")：为元素设置CSS样式的值

      2.addClass()：为元素添加类样式

      3.next()：获得元素其后紧邻的同辈元素

十四.DOM对象转jQuery对象

    使用$()函数进行转化：$(DOM对象)，示例：

    vartxtName=document.getElementById("txtName"); //DOM对象

    var$txtName=$(txtName);   //jQuery对象

    注意：jQuery对象命名一般约定以$开头在事件中经常使用$(this)，this是触发该事件的对象。

十五.jQuery对象转DOM对象

  1. jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM象。示例：

var $txtName=$ ("#txtName"); //jQuery对象；

var txtName=$txtName[0];//DOM对象。

  2.通过get(index)方法得到相应的DOM对象。

示例：

var$txtName=$("#txtName");//jQuery对象；

vartxtName=$txtName.get(0); //DOM对象。