一、jQuery概述

1.jQuery的优点

     jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。它有以下几点优势。

     (1)轻量级。

     (2)强大的选择器。

     (3)出色的DOM封装。

     (4)可靠的事件处理机制。

     (5)完善的Ajax。

 

2.jQuery类库说明

     jQuery的库分为两种,分别是生产版和开发版。区别如下:

名称

大小

说明

jquery.js(开发版)

约229KB

完整无压缩,主要用于测试、学习、开发。

jquery.min.js(生产版)

约31KB

经过工具压缩主要用于产品和项目。

 

3.第一个HelloWorld

     使用jQuery库之前先引入这个库。

    <!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-2.2.3.js"></script>
    	$(function(){

    		$("#button").click(function(){
alert("Hello,World");
}); });

     这段代码类似于JavaScript中的window.onload方法,但是还有点区别。

     区别1: 执行时机不同。

     window.onload必须等待网页中所有内容加载完毕后(包括图片)才能执行。

     $(function(){})网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的元素并没有加载完。

    区别2: 编写个数。

     window.onload不能编写多个。

     $(function(){})能同时编写多个。

 

二、jQuery和DOM对象

1.jQuery对象

     jQuery对象就是通过"$()"函数包装DOM对象而产生的对象。

     jQuery对象无法使用DOM对象中的任何方法,同时DOM对象也不能使用jQuery对象的任何方法。

     格式: var variable = DOM对象;

             var $variable = $(variable); Jquery对象

 

2.jQuery对象转换为DOM对象

     jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法。

      jQuery 提供了两种方法是将一个jQuery 对象转换成DOM对象,即[index]get(index)。

     (1)jQuery 对象是类似数组的对象,可以通过[index]的方法得到相应的DOM对象。

      (2)另一种方法是jQuery 本身提供的,通过get(index)方法得到相应的DOM对象。    

    	  	//1.获取一个jQuery对象
var $btn = $("#btn_test"); //2.jQuery是一个数组
alert($btn.length);//1 //3.jQuery--->DOM
var btn = $btn[0]; //第一种转换方式
var btn2 = $btn.get(0); //第二种转换方式
alert(btn.firstChild.nodeValue); //123
alert(btn2.firstChild.nodeValue); //123

 

3.DOM对象转换为jQuery对象

     对于一个DOM对象,只需要用$()函数把DOM对象包装起来,就可以获得一个jQuery对象。

      格式: $(DOM对象)

        	//DOM--->jQuery
var btn_test2 = document.getElementById("btn_test2");
var $btn_test2 = $(btn_test2);
alert($btn_test2.length); // 1

     平时用到的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。

jQuery基础学习(一)—jQuery初识的更多相关文章

  1. jQuery基础学习3——jQuery库冲突

    默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...

  2. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  3. jQuery基础学习4——jQuery容错性

    使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...

  4. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  5. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  8. 【总结整理】JQuery基础学习---动画

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  9. 【总结整理】JQuery基础学习---DOM篇

    前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...

随机推荐

  1. C#中运算符的应用

    c#中的运算符(只说我自己熟悉和常用的)一.算数运算:加 +减 -乘 *除 / (整型的除法是不算小数点的,也就是说结果是整数,余数舍去了,求余数看下面)求余数 % 加减乘好理解,整型的除法和求余数因 ...

  2. Java程序员入门:程序员究竟可以干多少年?

    很多人都说程序员是青春饭,只能干到30岁. 然而事实真的如此么? 今天我们来探讨一下这个老话题,看看为了技术与编程执着究竟能走多远? 01年龄分布图 先来看一下程序员的年龄分布图: 我们可以看到程序员 ...

  3. jquery ajax标准写法

    $.ajax({ url:url,                      //地址 type:'post', //请求方式 还可以是get type不可写成Type 不让会导致数据发送不过去,使用 ...

  4. css样式表1 2017-03-11

    样式表 DIV + CSS 一.        样式表的分类 以下均以div标签为例,可以换成其他标签 1.  内联样式表 格式: style="属性1:属性值1:属性2:属性值2:属性3: ...

  5. bootstrap禁用点击空白处关闭模态框

    原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html

  6. wemall app商城源码中ScrollView中嵌套ListView主要代码

    很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...

  7. 1726: [Usaco2006 Nov]Roadblocks第二短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 835  Solved: 398[S ...

  8. 剑指offer_数组中的逆序对

    题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P. 并将P对1000000007取模的结果输出. 即输出P%100 ...

  9. Qt下实现简单的UDP通信

    本人呢还是小实习生一枚,刚一脚踏进社会大母亲的怀抱,不想找工作的时候碰到的全是培训机构... 不过还是幸运的进了一家...咳咳,国企?!好吧,其实是国企下面的一个分出来的小公司(正在起步中,算是创业公 ...

  10. pageRank算法 python实现

    一.什么是pagerank PageRank的Page可是认为是网页,表示网页排名,也可以认为是Larry Page(google 产品经理),因为他是这个算法的发明者之一,还是google CEO( ...