初识jQuery
前言
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或
JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery是JS的一个库!封装好的一个库!它就是类似于Java中的一个jar包。
jQuery是最具代表性的一个库,它是划时代的产品。
1. 了解jQuery
核心理念:write less,do more (写更少,做的更多)。
只要JS能做的,它都能做,大大简化了开发代码。
-
强大的选择器
它支持CSS3的所有选择器,还单独定制了一套高级选择器。
-
出色的DOM封装
简化且封装了大量的DOM操作。
-
可靠的事件处理机制
jQ把所有事件都封装了一个个的单独函数。
xxx.onclick = function(){ } xxx.click();
-
浏览器的兼容性好
jQ封装过程中处理了兼容性问题。jQ 2.0以前的版本 兼容IE6 7 8
-
隐式迭代
很多选择器在使用时无感知的进行了一系列的迭代(遍历)处理。
-
丰富的插件支持
jQ插件非常丰富,因为jQ大大简化了开发,所以很多开发人员也乐意使用jQ去开发一些JS插件。
-
对AJAX做了大量封装(了解)
一种异步无刷新的请求技术!
jQuery的特性小总结:
特性:
- 概念:jQuery是一个快速、简洁的JavaScript框架(JavaScript代码库);
- 设计宗旨:“Write Less,Do More”,即写更少的代码,做更多的事情;
- 组成部分:核心、UI、插件
- 特点:
- 快速获取文档元素;
- 提供漂亮的页面动态效果;
- 创建AJAX无刷新页面;
- 提供对JavaScript语言的增强;
- 增强的时间处理;
- 更改网页的内容;
2. 掌握jQuery的环境搭建和使用
2.1 环境搭建
-
下载jQ(可以从jQ官网、jQ插件库网、GitHub)
版本选择:1.12.4或者1.8.3 它们兼容IE 6/7/8
每个版本都会有两种文件选择:开发版(可以直接看到源码,方便调试)、发布版(压缩后文件体积比较小,加载速度快)。
-
导包(你想使用jQ代码,就需要先引入jQ,必须在你的代码前<自上而下加载代码>)
<script src="jq地址" type="text/javascript" charset="utf-8"></script>
-
新建一个script标签开始使用
<script type="text/javascript"> // 页面加载函数 $(function(){ alert("Hello jQuery!"); }); </script>
2.2 原生JS的页面加载函数和jQ的页面加载函数的区别
2.3 jQ的语法
$(选择器).action();
jQuery().action();
工厂函数的作用:用于将DOM对象或者一系列的jQ支持的语法转换为jQ对象。
$:函数名 等价于jQuery
工厂函数参数:选择器 用于选中具体要进行操作的DOM对象
action:jQ的方法或者属性等...
// $(document) 它可以将DOM对象转换为jQ对象
// read(); jQ的页面加载方法/函数
$(document).ready(function(){});
$(function(){});
2.4 jQ的基本页面操作函数
- css() 等价于JS的
xxx.style.backgroundColor=xxx;
// 给div设置背景颜色为绿色
// $("#test").css("background-color","green");
// 可以同时设置多个
$("#test").css({
"background-color":"green",
"border":"5px solid yellow"
});
- addClass() 等价于
xxx.className = "xx";
$("#test").addClass("test");
-
show() 展示 等价于
xxxx.style.display = block/inline/inline-block;
-
hide() 隐藏 等价于
xx.style.display = "none";
// 绑定事件 $("#hide").click(function(){ // $("#test").hide(); // $("#test").hide("2000"); // $("#test").fadeOut("2000"); $("#test").slideUp("5000"); }); $("#show").click(function(){ // $("#test").show(); // $("#test").fadeIn("3000"); $("#test").slideDown("5000"); });
2.5 jQ的链式操作
对一个对象进行多重操作,并将操作结果返回给该对象。
2.6 jQ和DOM对象的转换
jQ的函数和DOM的函数属性等都是独立的,不可通用,所以有些时候我们需要进行转换,才能使用对应的一些函数。(忘记了一些函数但记得另一个的函数使用)
// DOM -> jQ
$(DOM对象)
$(document).ready();
var divEle = document.getElementById("test");
$(divEle)
// jQ -> DOM 你可以把一个jQ对象理解为一个数组 $("tr")
$("tr").get(索引);
$("tr")[索引];
3. 掌握jQuery的常用选择器
JQuery操作页面元素
- 使用addClass()方法为元素添加样式
- 使用css()方法设置元素样式
- 使用show()、hide() 方法设置元素的显示和隐藏
3.1 基本选择器
同CSS选择器,略。
// 1.点击dt的时候,利用标签选择器将两个<dd>的内容显示
$("dt").click(function(){
// jQ有隐式迭代
$("dd").show();
});
// 2.利用标签选择器,将<h1>元素的字体颜色设置为蓝色
$("h1").css("color","blue");
// 3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px
$(".price").css({
"background":"#efefef",
"padding":"5px"
});
// 4.利用id选择器将id名为author的字体颜色设置为#083499
$("#author").css("color","#083499");
// 5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000
$(".intro,dd,dt").css("color","#ff0000");
// 6.使用全局选择器将所有字体粗细设置为加粗
$("*").css("font-weight","bold");
3.2 层次选择器
// $(".textRight p").css("color","red");
// $(".textRight>p").css("color","red");
// $("h1+p").css("text-decoration","underline");
$("h1~p").css("text-decoration","underline");
3.3 属性选择器
// $("#news a[class]").css("background","#c9cbcb");
// $("#news a[class=hot]").css("background","#c9cbcb");
// $("#news a[class!=hot]").css("background","#c9cbcb");
// $("#news a[href^=www]").css("background","#c9cbcb");
// $("#news a[href$=html]").css("background","#c9cbcb");
$("#news a[href*=k2]").css("background","#c9cbcb");
3.4 过滤选择器
基本过滤选择器:
// 1.使用过滤选择器给类名为contain下的<h2>设置背景颜色为#2a65ba和字体颜色为#ffffff
$(".contain :header").css({
"background":"#2a65ba",
"color":"#fff"
});
// 2.使用过滤选择器给类名为contain下的最后一个<li>的边框设置为none;
$(".contain li:last").css("border-bottom","none");
// 3.使用过滤选择器给类名为contain下的第一个<li>设置字体大小为16px 字体颜色为#e90202
/*$(".contain li:first").css({
"font-size":"16px",
"color":"#e90202"
});*/
// 4.使用过滤选择器给类名为contain下的偶数行<li>背景颜色设置为#f0f0f0
// $(".contain li:even").css("background","#f0f0f0");
// 5.使用过滤选择器给类名为contain下的奇数行<li>背景颜色设置为#cccccc
// $(".contain li:odd").css("background","#cccccc");
// 6.使用过滤选择器给类名为contain下的前两个<li>的字体颜色设置为#708b02
// $(".contain li:lt(2)").css("color","#708b02");
// 7.使用过滤选择器给类名为contain下的后两个<li>的字体颜色设置为#b66302
// $(".contain li:gt(3)").css("color","#708b02");
// 8.使用过滤选择器给类名为contain下的第三个<li>的背景颜色设置为#02acaa
// $(".contain li:eq(2)").css("color","#02acaa");
$(".contain li:not(li:eq(2))").css("color","#02acaa");
可见性过滤选择器:
$("#show").click(function(){
// 将所有隐藏的p都显示出来
$("p:hidden").show();
});
$("#hide").click(function(){
$("p:visible").hide();
});
注意事项:
- 选择器中的空格
- 选择器的书写规范严格,多一个空格或少一个空格,都会影响选择器的效果
表单过滤选择器:(表单校验章节)
表单对象的属性过滤器通过表单元素的状态属性(例如:选中、不可用等状态)匹配元素
:checked
说明:匹配所有选中的被选中元素
示例:$("input:checked") //匹配所有被选中的input元素
:disabled
说明:匹配所有不可用元素
示例:$("input:disenabled") //匹配所有不可用input元素
:enabled
说明:匹配所有可用的元素
示例:$("input:enabled") //匹配所有可用的input元素
:selected
说明:匹配所有选中的option元素
示例:$("select option:selected")//匹配所有被选中的选项元素