06-jQuery基础

来源：互联网发布：Linux xmonad 编辑：程序博客网时间：2024/06/13 14:43

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

jQuery基础入门

今日内容介绍

重写javascript案例：弹出广告
重写javascript案例：隔行换色
重写javascript案例：全选/全不选

今日内容学习目标

列举常见的五种选择器，并简单描述其作用
通过选择器，获得jQuery对象
学会给标签绑定事件
可以实现显示或隐藏标签。

重写弹出广告
1. 案例分析

重写javascript案例“弹出广告”

什么是jQuery

jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

在开发时候,通常不会使用JavaScript原生代码开发,而是使用框架

jQuery2.0及后续版本不再支持IE6/7/8浏览器

核心理念是write less,do more(写得更少,做得更多)

引入和对象获取

学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用<script>导入即可。

基本语法：jQuery(选择器) 或 $(选择器)
- 及在 jQuery中 "jQuery == $"，区分大小写

//1 获得jQuery对象

// * 命名约定：jQuery对象变量名建议以$开头。

var $demoId = $("#demoId");

注释：

//单行注释

/*块注释*/

1. 1. 1. 基本操作
      
      jQuery页面加载

jQuery提供ready()函数，用于页面成功加载后执行。与window.onload函数类型。

//实际开发中，我们习惯将<script>标签编写在<head>标签体内，

//整个页面的解析时从上网下的，此时将不能获得<input>对象

alert($("#demoId").length); //获得匹配对象的个数，0表示没有匹配到任何

//1 javascript页面加载

window.onload = function(){

alert("js页面加载");

}

//2 jQuery页面加载

$(document).ready(function () {

alert("jQuery页面加载");

});

* 注意：

* * js给onload只能赋一个值，如果对此赋值，后面的将覆盖前的。

* * jQuery ready可以使用多次，多个页面加载将依次执行。

</script>

<body>

</body>

jQuery对象和DOM转换

jQuery对象和DOM对象可以相互转换，但两个对象的函数不能彼此混搭使用。jQuery对象只能使用自己的函数

DOM对象转换成jQuery对象，语法：jQuery(dom对象)

jQuery对象转换成DOM对象，语法：$username[index]

//1 原生javascript获得value值

var d1 = document.getElementById("demoId");

// alert(d1.value);

//2 将js dom对象转换成jQuery对象

// * 语法：$(dom对象) 或 jQuery(dom对象)

var $d2 = $(d1);

// alert($d2.val());

//3 将jQuery 转换成 dom对象

// * jQuery对象内部以数组方式存放所有的匹配数据，如果只匹配到一个，索引号为0。

var d3 = $d2[0];

alert(d3.value);

// 总结：jQuery对象和dom对象，函数(api)不能相互调用

1. 1. 1. 基本选择器

$(document).ready(function () {

//1 id选择器，格式：$("#id值")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一个

//2 标签选择器，格式：$("标签名")

var $d2 = $("input");

alert($d2.length); //3，表示3个input

//3 类选择器，格式：$(".class类名")

// * length 和 size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2，表示两个input class为myClass

});

</script>

本案例中将使用到jQuery的“基本过滤选择器”、样式操作、属性操作等知识，接下来我们下了解这些知识。

1. 1. 效果（了解）
    1. 基本

通过改变元素高度和宽度显示或隐藏

show(speed,fn) 显示

参数1 speed，显示速度，单位：毫秒。固定字符串：slow, normal, or fast

参数2fn，显示成功之后回调函数。

hide() 隐藏

toggle() 切换

1. 1. 1. 滑动

通过改变元素高度显示或隐藏

slideDown() 显示，高度变大。

slideUp() 隐藏，高度变小。

slideToggle() 切换

1. 1. 1. 淡入淡出

通过改变元素透明度显示或隐藏

fadeIn() 显示

fadeOut() 隐藏

fadeToggle() 切换

fadeTo(speed,opacity,[fn]) 指定透明度

参数2opacity：一个0至1之间表示透明度的数字

1. 案例实现

var time;

$(function(){

// 设置定时 5秒后执行一个显示广告的函数

time = setInterval("showAd()",5000);

});

// 显示广告的函数

function showAd(){

// 获得广告的div，显示

// $("#divAd").show(1000);

// $("#divAd").slideDown(3000);

$("#divAd").fadeIn(3000);

// 清空定时：

clearInterval(time);

// 重新设置定时:

time = setInterval("hideAd()",5000);

}

// 隐藏广告的函数:

function hideAd(){

// 获得广告的div，隐藏

// $("#divAd").hide(3000);

// $("#divAd").slideUp(3000);

$("#divAd").fadeOut(3000);

// 清空定时：

clearInterval(time);

}

</script>

1. 选择器总结
  1. 基本选择器

jQuery后续的学习中，“基本选择器”使用的频率最大，我们先预先学习一下。

$(document).ready(function () {

//1 id选择器，格式：$("#id值")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一个

//2 标签选择器，格式：$("标签名")

var $d2 = $("input");

alert($d2.length); //3，表示3个input

//3 类选择器，格式：$(".class类名")

// * length 和 size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2，表示两个input class为myClass

});

</script>

1. 1. 层级选择器

A B ，获得A元素内部的所有的B元素。（祖孙）--后代

A > B ，获得A元素下面的所有B子元素。（父子）

A + B ，获得A元素同级下一个B元素（兄弟）

A ~ B，获得A元素同级所有B元素（兄弟）

1. 1. 基本过滤选择器

:first 第一个

:last 最后一个

:not(..) 删除指定内容。例如：1234:not(3) --> 124

:even 偶数，从 0 开始计数 -- 操作索引号，页面显示奇数项

:odd 奇数

:eq(index) 指定第几个 =

:gt(index) 大于n个 >

:lt(index) 小于n个 <

--------------------------------------------------

:header 获得标题（<h1> /<h2> ....）

:animated 获得动画的

:focus 获得焦点

1. 1. 属性选择器

[属性名] 获得有属性名的元素。例如：<xxx name="username"> | <xxx name=" "> | <xxx name>

[属性名=值] 获得属性名等于值元素。

[属性名!=值] 获得属性名不等于值元素。

[...][...][...] 复合属性选择器，多个属性同时过滤。where .. and ... and ...

----------------------------------

[属性名^=值] 获得属性名以值开头元素。

[属性名$=值] 获得属性名以值结尾元素。

[属性名*=值] 获得属性名含有值元素。

1. 1. 表单属性选择器

:enabled 可用

:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>

:checked 选中（单选radio ，多选checkbox） <input type="..." checked="checked">

:selected 选择（下列列表 <select>） <option selected="selected">

隔行换色：
1. 案例介绍

重写JavaScript案例“隔行换色”

1. 案例相关技术
  1. class操作：

<xxx class=””>

addClass() 给指定标签的class属性追加样式

removeClass() 将标签指定的class属性移除

toggleClass() 切换class属性样式。及没有时添加，有的时候删除。

1. 案例实现

CSS样式：

.even { background:#FFF38F;} /* 偶数行样式*/

.odd { background:#FFFFEE;} /* 奇数行样式*/

JavaScript代码

$(function(){

// 找奇数行：

//$("tr:odd").addClass("odd");

// 偶数行:

//$("tr:even").addClass("even");

$("tbody>tr:odd").addClass("odd");

$("tbody>tr:even").addClass("even");

});

</script>

全选和全不选
1. 案例介绍

重写JavaScript时案例“全选/全不选”

1. 案例相关的函数
  1. 属性操作：prop()

prop()操作的标签的特性。JQ1.6新特性，获得一些第一次分配undefined属性值的标签时，如果抛异常，将忽略浏览器生成的任何错误。
removeProp()移除标签的特性。

1. 案例实现

// 复选框的全选和全不选:

$(function(){

// 步骤一：为上面的复选框绑定单击事件:

$("#selectAll").click(function(){

/*if(this.checked == true){

// 如果上面的复选框被选中：

$("input[name='ids']").prop("checked",true);

}else{

// 上面的复选框没有被选中

$("input[name='ids']").prop("checked",false);

}*/

$("input[name='ids']").prop("checked",this.checked);

});

省市联动
1. 案例分析

重写javascript案例“省市联动”

1. 案例相关的函数

本案例需要对标签的value属性值，标签体内容进行操作，并需要遍历所有的市。

1. 1. 属性操作：val、text、html

val() 获得value属性的值

val(...) 给value属性设置值

html() 获得html代码，如果有标签，一并获得。

html(....) 设置html代码，如果有标签，将进行解析。

text() 获得文本，如果有标签，忽略。

text(....) 设置文本，如果含有标签，不进行解析。原样输出。

1. 1. 遍历函数：each

each的方法进行遍历.

第一种用法：

* JQ的对象.each(function(i,n){ n参数1：遍历索引号参数2：数组中的元素

});

第二种用法

* $.each(数组,function(i,n){

});

1. 1. 文档处理：内部插入

A.append(B) , 将B插入到A内部后面。

<A>

....

<B></B>

</A>

A.prepend(B) , 将B插入到A内部前面。

<A>

<B></B>

....

</A>

---------------------------------------------------

A.appendTo(B) ，将A插入到B内部后面

A.prependTo(B) ，将A插入到B内部前面。

1. 案例实现

实现步骤：

//1、添加jq库文件

//2、编写页面加载事件

//3、得到省份标签，并绑定change事件

//4、获得省份的value值

//5、根据省份的value得到城市对应的数组数据

//6、得到城市的标签，并向标签内追加内容<script type="text/javascript">

// 定义二维数组:

var cities = new Array(4);

cities[0] = new Array("沈阳市","鞍山市","大连市");

cities[1] = new Array("长春市","吉林市","松原市","延边市");

cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");

cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");

cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

$(function(){

//给省绑定change事件

$("#province").change(function(){

//获得省value值，即：索引号

var pIndex = $(this).val();

// 获得对应市的数组

var allCity = cities[pIndex];

//清空city列表

$("#city")[0].length = 0;

//遍历数组

$(allCity).each(function(i,n){

//alert(i+" "+n);

$("#city").append("<option value='"+i+"'>"+n+"</option>");

});

</script>

左右选择

1. 案例分析

本案例我们jQuery的“层级选择器”、“表单属性过滤选择器”、“文档处理”。通过“层级选择器”获得需要的操作对象，通过“表单属性过滤选择器”从已有的对象中筛选出需要的，最后通过“文档处理”将筛选后的内容追加到指定的位置。

1. 案例实现

开发步骤：

//1、添加jq库文件

//2、添加页面加载事件

//3、获得add标签，并绑定事件

//4、获得左边的下拉框对象中选中的option对象，并添加到右边的下拉框中

$(function(){

//得到add标签

$("#add").click(function(){

//得到选中的option元素

$("#selectLeft option:selected").appendTo("#selectRight");

});

//得到addAll标签

$("#addAll").click(function(){

//得到所有的option元素

$("#selectLeft option").appendTo("#selectRight");

});

</script>

1. 总结
  1. 常见事件

1. 1. 事件切换

hover( over , out ) 简化方法

A.hover( fn1 , fn2) 等效 A.mouseover( fn1 ).mouseout( fn2 )

toggle( fn1 , fn2 , .... ) click事件增强版，轮回

表单校验
1. 案例介绍

在学习JavaScript时，我们手动的完成过表单数据的校验，此功能在开发中非常常见，属于通用功能范畴，实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。

1. 案例相关知识：validation校验
  1. 下载

官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档位置：http://jqueryvalidation.org/documentation/
目录结构：

1. 1. 导入

validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）

1. 1. 使用前提

validate需要手动的声明，对那个表单进行校验，手动方式可以使用以下4种检验方式。

$(document).ready(function () {

$("#formId").validate();

});

</script>

校验类型

取值

描述

required

true|false

必填字段

邮件地址

url

路径

date

数字

日期

dateISO

字符串

日期（YYYY-MM-dd）

number

数字（负数，小数）

digits

整数

minlength

数字

最小长度

maxlength

数字

最大长度

rangelength

[minL,maxL]

长度范围

min

最小值

max

最大值

range

[min,max]

值范围

equalTo

jQuery表达式

两个值相同

remote

url路径

ajax校验

1. 1. 检验方式：js 代码方式

语法：

$(…).validate({

rules:{},

messages:{}

});

rules 规则语法：

rules:{

字段名:校验器,

字段名:校验器

}

校验器语法：

语法：{校验器:值,校验器:值,...}

message 提示语法：

message:{

字段名:{校验器:"提示",校验器:"提示",...}

}

1. 1. 案例实现

- js代码

<scriptsrc="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>

$().ready(function () {

$("#formId").validate({

rules:{

username:{

required:true,

minlength:2,

maxlength:5

password:{

required:true,

number:true

repassword:{

equalTo:"[name='password']"

email:"email",

username:{

required:true,

rangelength:[2,5]

gender:{

required:true

}

messages:{

gender:{

required:"性别必须勾选"

}

});

</script>

- html代码

<input type="radio" name="gender" value="男" />男

<input type="radio" name="gender" value="女" />女

<!--在指定位置显示错误信息

* class 必须是error

* for 必须设置错误对象

-->

1. 总结

$("#img").prop("src","1.jpg");新版本使用的语法 // document.getElementById("img").src = "1.jpg";

$("#img").attr("src","1.jpg");老版本使用的语法

阅读全文

0 0