JQuery

Posted 轻云流风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery相关的知识，希望对你有一定的参考价值。

1.1 使用JQuery完成页面的弹出广告的效果：

1.1.1 需求：

在网站的首页上定时弹出一个广告，过几秒之后，广告会自动消失。

 

1.1.2 分析：

1.1.2.1 技术分析：

【JQuery的概述】

  • 什么JQuery：

 

  • JQuery的版本：

JQuery1.x   JQuery2.x(不支持IE6,7,8)

  • JQuery的作用：

大大简化的JS的代码编写.

将页面与JS分离

  • 常见的JS的库：

JQuery,prototype,dwr,ExtJS...

【JQuery的入门】

<script src="../../js/jquery-1.8.3.js"></script>

<script>

// 页面加载完毕

window.onload = function(){

alert("Hello 王守义");

}

 

window.onload = function(){

alert("Hello 老王");

}

 

// DOM树绘制完毕以后就会执行

jQuery(document).ready(function(){

alert("Hello 王如花");

});

 

// JQ的简写   jQuery = $   

/*jQuery(document).ready(function(){

alert("Hello 王凤");

});*/

$(function(){

alert("Hello 王凤");

});

 

</script>

【JQ和DOM对象的转换】

使用JS写的代码只能调用JS中的属性和方法.

使用JQ写的代码只能调用JQ中的属性和方法．

<script src="../../js/jquery-1.8.3.js"></script>

<script>

// JS

function writeIn(){

// document.getElementById("s1").innerhtml = "Hello 王超杰";

var s1 = document.getElementById("s1");

// 将JS对象转成JQuery的对象

$(s1).html("Hello 王超杰");

}

 

// JQ

$(function(){

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

// $("#s1").html("Hello 王守义");

// 将JQ的对象转成JS的对象。

// $("#s1")[0].innerHTML="Hello 王守义";

// $("#s1").get(0).innerHTML = "Hello 王守义";

});

});

</script>

【JQ的获得元素】

$(“#id”)

【JQ的效果】

* show(); --显示某个元素

* hide(); --隐藏某个元素

* slideDown(); --向下滑动

* slideUp(); --向上滑动

* fadeOut(); --淡出

* fadeIn(); --淡入

* animate(); --自定义动画

* toggle(); --单击事件的切换

1.1.2.2 步骤分析：

  • 步骤一：页面加载后，设置一个定时操作.5秒执行一个函数.
  • 步骤二：在函数中获得广告的div.显示div.
  • 步骤三：清空原来的定时,设置一个定时.5秒后执行一个函数.
  • 步骤四：在函数中获得广告的div.隐藏div.

1.1.3 代码实现：

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script>

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.4 总结：

1.1.4.1 JQuery的选择器：

【基本选择器】

  • ID选择器：

$(“#id”)

  • 类选择器：

$(“.class”)

  • 元素选择器：

$(“元素”)

  • 通配符选择器：

$(“*”)

  • 选择器,选择器:

$(“#id,.class”)

【基本选择器的案例】

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

$("#one").css("background","#bbffaa");`

});

 

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

$(".mini").css("backgroundColor","#bbffaa");

});

 

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

$("div").css("backgroundColor","#bbffaa");

});

 

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

$("*").css("backgroundColor","#bbffaa");

});

 

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

$("#two,.mini").css("backgroundColor","#bbffaa");

});

});

</script>

</head>

<body>

<input type="button" id="btn1" value="选择为one的元素"/>

<input type="button" id="btn2" value="选择样式为mini的元素"/>

<input type="button" id="btn3" value="选择所有的div元素"/>

<input type="button" id="btn4" value="选择所有元素"/>

<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>

<hr/>

<div id="one">

<div class="mini">

111

</div>

</div>

 

<div id="two">

<div class="mini">

222

</div>

<div class="mini">

333

</div>

</div>

 

<div id="three">

<div class="mini">

444

</div>

<div class="mini">

555

</div>

<div class="mini">

666

</div>

</div>

 

<span id="four">

 

</span>

</body>

【JQ的层级选择器】

  • Ancestor  descendant2

 

  • Parent >child

 

  • Prev+next

 

  • Prev~sibling

 

【JQ层级选择器的代码】

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="../../css/style.css" type="text/css"/>

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

$("body div").css("background","#bbffaa");

});

 

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

$("body>div").css("backgroundColor","#bbffaa");

});

 

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

$("#two+div").css("backgroundColor","#bbffaa");

});

 

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

$("#one~div").css("backgroundColor","#bbffaa");

});

 

 

});

</script>

</head>

<body>

<input type="button" id="btn1" value="选择body中的所有的div元素"/>

<input type="button" id="btn2" value="选择body中的第一级的孩子"/>

<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>

<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

 

<hr/>

<div id="one">

<div class="mini">

111

</div>

</div>

 

<div id="two">

<div class="mini">

222

</div>

<div class="mini">

333

</div>

</div>

 

<div id="three">

<div class="mini">

444

</div>

<div class="mini">

555

</div>

<div class="mini">

666

</div>

</div>

 

<span id="four">

 

</span>

</body>

</html>

【JQ的基本过滤选择器】

 

 

$(function(){

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

$("body div:first").css("background","#bbffaa");

});

 

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

$("body div:last").css("backgroundColor","#bbffaa");

});

 

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

$("body div:odd").css("backgroundColor","#bbffaa");

});

 

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

$("body div:even").css("backgroundColor","#bbffaa");

});

 

 

});

【JQ的属性选择器】

<script>

$(function(){

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

$("div[title]").css("background","#bbffaa");

});

 

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

$("div[title=‘aaa‘]").css("backgroundColor","#bbffaa");

});

 

});

</script>

【JQ的表单选择器】

$(function(){

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

$(":input").css("background","#bbffaa");

});

 

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

$(":text").css("background","#bbffaa");

});

});

1.2 使用JQuery完成表格的隔行换色

1.2.1 需求：

制作一个表格，隔行换色.第一行标题的行，不需要进行换色，其他的行需要变换颜色．

 

1.2.2 分析：

1.2.2.1 技术分析：

【JQuery的CSS类】

使用addClass(),removeClass(); 添加或移除样式

1.2.2.2 步骤分析：

  • 步骤一：在页面中引入一个jquery的js
  • 步骤二：写页面加载的函数.
  • 步骤三：使用选择器基本过滤找到奇数行和偶数行
  • 步骤四：分别给不同的行添加样式（样式已经由美工制作好的）

1.2.3 代码实现：

<script>

$(function(){

// 找奇数行：

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

// 偶数行:

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

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

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

});

</script>

1.3 使用JQuery完成复选框的全选和全不选

1.3.1 需求：

有如下的表格的数据，批量的进行删除.将上面的复选框选中，下面其他的复选框都被选中。如果上面的复选框没有被选中，那么将下面的所有的复选框全不选.

 

1.3.2 分析：

1.3.2.1 技术分析：

【JQuery操作某个元素的属性】

<script>

$(function(){

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

// 获得属性的值

// alert($("#img1").attr("src"));

// 修改属性的值:

$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");

});

});

</script>

1.3.2.2 步骤分析：

  • 步骤一：引入jquery的js
  • 步骤二：编写加载的方法.
  • 步骤三：上面的复选框绑定一个单击事件
  • 步骤四：如果上面的被选中，修改下面的所有的复选框的checked属性变为true否则将复选框的checked属性变为false.

1.3.3 代码实现：

$(function(){

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

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

 

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

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

$("input[name=‘ids‘]").attr("checked",true);

}else{

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

$("input[name=‘ids‘]").attr("checked",false);

}*/

// $("input[name=‘ids‘]").attr("checked",this.checked);

$("input[name=‘ids‘]").prop("checked",this.checked);// this JS的对象  

});

});

1.3.4 总结：

低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.

1.4 使用JQuery完成省市联动

1.4.1 需求：

在注册的页面上有省市联动.

 

1.4.2 分析：

1.4.2.1 技术分析:

【JQuery的遍历】

each的方法进行遍历.

一种用法：

* JQ的对象.each(function(i,n){

 

});

 

二种用法

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

 

});

【JQuery的DOM的操作】

JS中添加元素：appendChild();

JQ中添加元素：

append();

appendTo();

1.4.2.2 步骤分析：

  • 步骤一：引入jquery.js
  • 步骤二：加载的方法.
  • 步骤三：定义二维数组
  • 步骤四：在第一个省份的下拉列表中绑定一个事件change
  • 步骤五：在绑定的事件的函数中，获得选中的省份的值.
  • 步骤六：遍历数组，省份的值与数组中的值比较.
  • 步骤七：获得数组的值.遍历获得的值.
  • 步骤八：获得每个值.创建元素，创建文本节点.
  • 步骤九：将文本添加到option元素中.将option添加到第二个下拉列表中 .

1.4.3 代码实现：

// 定义二维数组：

var cities = [

["长春市","吉林市","延边市","白山市","松原市"],

["济南市","青岛市","临沂市","烟台市"],

["石家庄","唐山","保定","承德","秦皇岛"],

["南京","苏州","扬州","无锡"]

];

$(function(){

// 获得省份的下拉列表，绑定事件

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

// 获得下拉列表的值:

// alert(this.value);

var val = this.value;

 

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

 

$city[0].options.length = 0;

 

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

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

if( val == i){

$(n).each(function(j,m){

// alert(m);

// 创建option元素

var opEL = document.createElement("option");

// 创建文本节点

var textNode = document.createTextNode(m);

// 将文本添加到option中

// opEL.appendChild(textNode);

$(opEL).append(textNode);

// 将option添加到第二个列表中

$city.append(opEL);

});

}

});

});

});

1.4.4 总结

【JQuery的文档操作】

$(“a”).append(“b”); // 将b添加到a元素中.

$(“a”).appendTo(“b”); // 将a添加到b元素中.

 

$(“a”).insertBefore(“b”); // 将a元素插入到b元素之前

$(“a”).insertAfter(“b”); // 将a元素插入到b元素之后

 

$(“a”).remove(); // 将a元素移除

1.5 使用JQuery完成下拉列表的左右选择：

1.5.1 需求：

在数据的编辑的页面中，有已选的商品和未有的商品两个下拉列表，可以左右进行选择

 

1.5.2 分析：

1.5.2.1 技术分析：

JQuery的选择器和文档操作.

1.5.2.2 步骤分析：

  • 步骤一：引入jquery的文件
  • 步骤二：页面加载的函数
  • 步骤三：在链接上添加一个事件.
  • 步骤四：使用选择器找到左侧的列表中被选中的元素，添加到右侧.

1.5.3 代码实现：

<script>

$(function(){

// 将左侧选中的option添加到右侧

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

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

});

 

// 将左侧所有的option添加到右侧

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

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

});

 

// 双击事件

$("#selectLeft").dblclick(function(){

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

});

});

</script>

1.5.4 总结：

1.5.4.1 JQuery中常用的事件：

 

 

以上是关于JQuery的主要内容，如果未能解决你的问题，请参考以下文章

JQueryJQuery基本操作

jQueryjquery插件封装

jQueryjQuery与Ajax的应用

jQueryjquery.metadata.js验证失效

Jqueryjquery刷新页面（局部及全页面刷新）

JqueryjQuery获取URL參数的两种方法