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>

JQDOM对象的转换】

使用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="选择idtwo并且样式为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="选择idtwo的元素的下一个元素"/>

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

 

<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 技术分析:

【JQueryCSS

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

1.2.2.2 步骤分析:

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

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 步骤分析:

  • 步骤一:引入jqueryjs
  • 步骤二:编写加载的方法.
  • 步骤三:上面的复选框绑定一个单击事件
  • 步骤四:如果上面的被选中,修改下面的所有的复选框的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){

 

});

JQueryDOM的操作】

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參数的两种方法