5、初始jQuery

–1、介绍
-1.jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。
-2.JavaScript是一种面向Web的脚本语言。大部分网站都使用了JavaScript,并且现有浏览器(基于桌面系统、平板电脑、智能手机和游戏机的浏览器)都包含了JavaScript解释器。它的出现使得网页与用户之间实现了实时、动态的交互,使网页包含了更多活泼的元素,使用户的操作变得更加简单便捷。
-3.JavaScript的弊端：一个是复杂的文档对象模型,另一个是不一致的浏览器实现。
-4.目前流行的JavaScript库：jQuery、Bootstrap、Zepto、Ext、YUI
-5.jQuery的用途：
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件的处理
4.方便地使用JQuery插件
5.与Ajax技术的完美结合
-5.JQuery的优势：
1.轻量级
2.强大的选择器
3.出色的DOM封装
4.可靠的事件处理机制
5.出色的浏览器兼容性
6.隐式迭代
7.丰富的插件支持
–2、配置jQuery环境
-1.jQuery的官方网站：http://jquery.com中下载jQuery库文件
-2.jQuery库的类型分为两种,分别是开发版(未压缩版)和发布版(压缩版),它门的对比如jQuery库的类型对比
jquery-1.版本号.js(开发版):完整无压缩版本,主要用于测试、学习和开发
jquery-1.版本号.js(发布版):经过工具压缩或经过服务器开启GZIP压缩,主要应用于发布的产品和项目
-3.jquery不用安装，想要在某个页面使用jQuery时,只需要在相关的HTML文档中引入该库文件的位置即可。
-4.在页面中引入jQuery











–3、window.onload与$(document).ready()的对比
window.onload:
执行时机：
必须等待网页中所有的内容加载完毕后(包括图片,Flash、视频等)才能执行
编写个数：
同一时间不能编写多个
执行以下代码:
window.οnlοad=function(){
alert(“小明学习不好”);
}
window.οnlοad=function(){
alert(“小明学习不好”);
}
结果只会输出一个"小明学习不好"
简写方法：
无
$(document).ready():
执行时机:
网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完
编写个数:
同一时间能同时编写多个
执行以下代码:
$(document).ready(function(){
alert(“小明学习不好”);
});
$(document).ready(function(){
alert(“小明学习不好”);
});
结果会输出两次"小明学习不好"
简化写法:
$(document).ready(function(){
//执行代码
});
可以简写成：
$(function()//执行代码);--4、jQuery语法结构-1.通过语句$(document).ready(function(){});不难发现,这条jQuery语句主要包含三大部分：$()、document和ready()。这三大部分在jQuery中分别称为工厂函数、选择器函数和方法,将其语法化后,结构如下。
语法：
$(selector).action();-2.工厂函数$()
在jQuery中,美元符号"$"等价于jQuery,即$()=jQuery()。$()作用是将DOM对象转化为jQuery对象,只有将DOM对象转化为jQuery对象后,才能使用jQuery的方法-3.选择器selectorjQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器,如标签选择器、类选择器、ID选择器和后代选择器和后代选择器等,使用jQuery选择器和$()工厂函数可以非常方便地获取操作的DOM元素,语法如下。
语法:
$(selector)
ID选择器、标签选择器、类选择器的用法如下所示。
$("#userName") //获取DOM中id为userName的元素
$(“div”) //获取DOM中所有的div的元素
$(".content");//获取DOM中class为content的元素-3.方法action()jQuery中提供了一系列方法。在这些方法中,一类重要的方法就是事件处理方法,主要用来绑定DOM元素的事件和事件处理方法。1.addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是被向被选元素添加一个或多个类样式,它的语法格式如下。语法:jQuery对象.addClass([样式名])2.$(this)的一个jQuery对象,指向鼠标指针当前移向的一菜单级
3.css()方法是jQuery中用于进行CSS操作的另一种方法,它的作用是为匹配的元素添加CSS样式,它的语法格式如下。
4.show()、hide()在jQuery中经常用到,分别用来显示、隐藏HTML元素,简单的语法格式如下。
语法:
$(selector).show();
$(selector).hide();
5.获取当前元素的下一个元素
next();
–5、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象,他能够使用jQuery中的方法
–6、DOM对象和jQuery对象互转
-1.dom对象转成jquery对象
获取dom对象:var title = document.getElementById(“title”);
把dom对象转成jquery对象 var $title=$(title)括号中的是dom对象
-2.jquery对象转成dom对象
获取jquery对象 var $title=$("#title");
把jquery对象转成dom对象 var title = $title.get(0);