jQuery基础学习(一)—jQuery初识
一、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初识的更多相关文章
- jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery基础学习4——jQuery容错性
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
- 【总结整理】JQuery基础学习---DOM篇
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...
随机推荐
- C#中运算符的应用
c#中的运算符(只说我自己熟悉和常用的)一.算数运算:加 +减 -乘 *除 / (整型的除法是不算小数点的,也就是说结果是整数,余数舍去了,求余数看下面)求余数 % 加减乘好理解,整型的除法和求余数因 ...
- Java程序员入门:程序员究竟可以干多少年?
很多人都说程序员是青春饭,只能干到30岁. 然而事实真的如此么? 今天我们来探讨一下这个老话题,看看为了技术与编程执着究竟能走多远? 01年龄分布图 先来看一下程序员的年龄分布图: 我们可以看到程序员 ...
- jquery ajax标准写法
$.ajax({ url:url, //地址 type:'post', //请求方式 还可以是get type不可写成Type 不让会导致数据发送不过去,使用 ...
- css样式表1 2017-03-11
样式表 DIV + CSS 一. 样式表的分类 以下均以div标签为例,可以换成其他标签 1. 内联样式表 格式: style="属性1:属性值1:属性2:属性值2:属性3: ...
- bootstrap禁用点击空白处关闭模态框
原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html
- wemall app商城源码中ScrollView中嵌套ListView主要代码
很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...
- 1726: [Usaco2006 Nov]Roadblocks第二短路
1726: [Usaco2006 Nov]Roadblocks第二短路 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 835 Solved: 398[S ...
- 剑指offer_数组中的逆序对
题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P. 并将P对1000000007取模的结果输出. 即输出P%100 ...
- Qt下实现简单的UDP通信
本人呢还是小实习生一枚,刚一脚踏进社会大母亲的怀抱,不想找工作的时候碰到的全是培训机构... 不过还是幸运的进了一家...咳咳,国企?!好吧,其实是国企下面的一个分出来的小公司(正在起步中,算是创业公 ...
- pageRank算法 python实现
一.什么是pagerank PageRank的Page可是认为是网页,表示网页排名,也可以认为是Larry Page(google 产品经理),因为他是这个算法的发明者之一,还是google CEO( ...