JQuery框架技术

最新推荐文章于 2024-06-24 20:44:34 发布

鬼步

最新推荐文章于 2024-06-24 20:44:34 发布

阅读量1.1k

点赞数

分类专栏： JQuery 文章标签： jquery 框架

本文链接：https://blog.csdn.net/u013189665/article/details/21641335

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery是JavaScript的简化框架，使用此框架后，可以使js代码支持大部分浏览器。

JQuery在使用时有两个大版本：1.x，2.x。

1.x是应用在IE6以上版本的浏览器中，主要是做的通用支持。

2.x是应用在IE9以上版本的浏览器中的，主要是用来针对HTML5完成支持。

1.x的最新版本是1.10，这里使用的是1.9版本。

JQuery主要包含的功能：

1）选择器：用来根据一些条件查找页面元素并取得，替代getElementByXxx的方法。

a) 基本选择器

b) 层级选择器

c) 索引选择器

d) 表单选择器

e) 选中选择器

2）属性处理：用来设置和取得各种属性

a) 普通属性

b) 常用属性

i. value

ii. innerHTML

iii. innerText

c) 样式属性

i. style样式

ii. class样式

3） DOM处理：可以动态为页面添加和删除元素

4） AJAX处理：可以简化AJAX的调用以及回调的操作。

5）事件操作：动态添加或删除事件。

6）特效：支持一些动态效果

7）扩展功能：使用的是JQuery的其他子插件，这里只介绍validate验证插件

这里先将AJAX功能合并到之前的级联菜单中，来看JQuery在AJAX里起的作用

先将jquery的js拷贝到项目的js文件夹下。

修改js代码。

function showplus(provinceId) {

// 需要传递4个参数

// 1: 提交路径

// 2: 使用对象进行参数传递,每个参数作为对象中的一个属性来传递

// 3: 回调函数

// 4: 数据类型, 可以选择text,xml或json格式

$.post("<%=basePath%>province_showplus.action",{provinceId:provinceId},showplusCallback,"json");

}

// JQuery自动将返回的字符串转换为对象或数组,并通过回调函数的参数直接返回,在回调函数中直接使用即可.

function showplusCallback(array) {

// 使用选择器取得下拉列表对象

var citySelect = $("#city");

// 查找到要删除的页面元素,并调用删除操作

$("#city option:gt(0)").remove();

// 循环取得id和title

for (var i = 0;i < array.length;i++) {

var id = array[i].id;

var title = array[i].title;

// JQuery创建页面元素直接使用字符串拼接即可

var option = "<option value='"+id+"'>"+title+"</option>";

// 将option设置为城市下拉列表的子节点

citySelect.append(option);

}

</script>

JQuery的选择器和属性处理

JQuery中基本的选择器有三种：

1）根据id取得元素，语法是 #id，如果有多个元素同名，只取得第一个。

2）根据标签名称取得元素，语法标签名，如果有多个元素，全部返回。

3）根据样式名称来取得元素，语法 .样式名，如果有多个元素，全部返回。

对于取得的元素来说，可以通过属性处理来设置或取得属性。

普通属性直接通过attr()方法来设置或取得属性。

常用属性需要使用特殊的方法来设置取得

1） value

a) val()

2） innerHTML

a) html()

3） innerText

a) text()

样式属性可以处理各种样式的设置和删除。

1) style样式使用css()方法来设置或取得

2) class样式使用addClass()方法或removeClass()方法来添加或删除

如果使用选择器返回的是一个元素，则设置和取得都是针对这个元素的。

如果返回的是一组元素，取得的会是第一个元素，但设置的则是所有元素。

function addStyle() {

// $("#userid").css("font-size","30px");

// $("#userid").css("color","green");

$("#userid").addClass("test1");

$("#userid").addClass("test2");

}

function removeStyle() {

$("#userid").removeClass("test1");

}

</script>

<style>

.test1 {

font-size:30px;

}

.test2 {

color:red;

}

</style>

</HEAD>

<BODY>

</center>

</BODY>

配合这种特点可以实现全选框功能。

function checkAllBox(flag) {

$("input").attr("checked",flag);

}

</script>

</HEAD>

<BODY>

</center>

</BODY>

除了基本选择器以外，还有其他选择器配合基本选择器一起使用，以便精确定位到需要的组件。

1）层级选择器：根据节点间的父子关系取得元素。

a) 父节点 > 子节点

b) 祖先元素后代元素

c) 平级节点 + 最大的弟弟节点

d) 平级节点 ~ 所有的弟弟节点

2）索引选择器：根据索引的下标来查找元素

a) 根据索引值取得元素

b) 根据单双号选择

i. 通过此功能可以配合实现单双行变色

function changeColor() {

$("#mytable tr:gt(0):odd").attr("bgColor","#dddddd");

$("#mytable tr:gt(0):even").attr("bgColor","#ffffff");

}

</script>

<style>

.test1 {

font-size:30px;

color:red;

}

</style>

</HEAD>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</center>

3）可以针对表单中元素的type来选择某一类表单元素

4）可以针对属性值来选择某一组元素。

function checkAllBox(flag) {

$(":checkbox[name='email']").attr("checked",flag);

}

</script>

<style>

.test1 {

font-size:30px;

color:red;

}

</style>

</HEAD>

<BODY>

<br>

<hr>

<br>

<input type="checkbox" name="sex" value="男" > 男

<input type="checkbox" name="sex" value="女" > 女

</center>

5）可以取得当前选中的元素

事件处理

可以动态为元素添加和删除事件。

function onButton() {

$(":button:first").on("click",test);

}

function offButton() {

$(":button:first").off("click");

}

function test() {

alert("测试");

}

</script>

</HEAD>

<BODY>

<br>

</center>

</BODY>

这里只能删除由JQuery添加的事件，通过html写好的事件无法删除

JQuery等js框架一般都提供一个ready事件，该事件是document对象的，类似onload

onload和ready哪个先执行？为什么？

1） ready是在页面html代码全部加载完成后自动执行，也就是DOM树结构建立好后就执行

2） load则是在页面所有资源加载完成后才执行。

DOM处理

这里完成一个表格的动态添加和删除行的功能。

var index = 2;

function addRow() {

// $("#mytable").append("<tr><td>"+index+"</td><td><input type='text' name='chepai' ></td><td><select name='type'><option>全责</option><option>主责</option><option>次责</option><option>无责</option></select></td><td><input type='button' value=' - ' οnclick='delRow(this);'></td></tr>");

$("#mytable").append($("#demoRow").clone());

$("#mytable tr:last td:first").html(index);

$("#mytable tr:last td:last input").css("display","");

index++;

}

function clearRow() {

$("#mytable tr:gt(1)").remove();

}

function delRow(button) {

$(button.parentNode.parentNode).remove();

}

</script>

</HEAD>

<BODY>

<tr>

</tr>

<td>

</select>

</td>

<td>

</td>

</tr>

</table>

</center>

</BODY>

特效

JQuery中默认提供了两种动画效果，显示隐藏和淡入淡出

function showImg() {

// $("div").show(2000);

$("div").fadeIn(2000);

}

function hideImg() {

// $("div").hide(2000);

$("div").fadeOut(2000);

}

</script>

</HEAD>

<BODY>

<br>

<div>

</div>

</center>

</BODY>

一般开发中应用的比较多的是自定义动画效果，这种功能需要通过animate方法来实现。

function showImg() {

$("div").animate({top:"0px"},2000);

}

function hideImg() {

$("div").animate({top:"-150px"},2000);

}

</script>

</HEAD>

</div>

</center>

</BODY>

浮动广告功能

function showImg() {

var topValue = parseInt(Math.random() * 600) + "px";

var leftValue = parseInt(Math.random() * 800) + "px";

$("div").animate({top:topValue,left:leftValue},2000,showImg);

}

function hideImg() {

$("div").animate({top:"-150px"},2000);

}

</script>

</HEAD>

</div>

</center>

</BODY>

JQuery验证组件

通过使用JQuery的validate扩展插件可以实现验证的操作。

$(document).ready(function(){

$("form").validate({

rules : {

userid : {

required:true ,

minlength:6

} ,

password : {

required : true,

maxlength : 20

repassword : {

equalTo : "#password"

email : {

email : true

}

messages : {

userid : {

required:"请输入用户名",

minlength:"长度不能少于6位"

password : {

required:"密码不能为空！",

maxlength:"长度不能超过20位"

repassword : {

equalTo : "两次密码必须一致"

} ,

email : {

email:"请输入合法的邮件地址"

}

});

</script>

</HEAD>

<BODY>

用户名: <input type="text" name="userid" id="userid"> <br>

密码: <input type="text" name="password" id="password"> <br>

再输入一次密码: <input type="text" name="repassword" id="repassword"> <br>

邮件地址: <input type="text" name="email" id="email"> <br>

</form>

</center>

</BODY>

鬼步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery框架技术

JQuery是JavaScript的简化框架，使用此框架后，可以使js代码支持大部分浏览器。JQuery在使用时有两个大版本：1.x，2.x。1.x是应用在IE6以上版本的浏览器中，主要是做的通用支持。2.x是应用在IE9以上版本的浏览器中的，主要是用来针对HTML5完成支持。 1.x的最新版本是1.10，这里使用的是1.9版本。 JQuery主要包含的功能：1）
复制链接

扫一扫

专栏目录