首页手记 jquery复习总结

jquery复习总结

标签：

JQuery

jquery和html的整合

jquery入门

获取一个jquery对象

dom对象和jquery对象之间的转换

页面加载:

派发事件:

案例：

jquery中效果:

隐藏或展示

滑入或滑出

淡入或淡出

弹出广告案例

案例1-步骤分析（定时器）

选择器总结:

基本选择器

层次选择器

基本过滤选择器:

内容过滤:

可见过滤:

属性过滤器:

表单过滤:

案例2-隔行换色

属性和css操作总结:

对属性的操作:

对css操作:操作元素的style属性

案例3-全选或者全不选(prop操作属性)

案例4-省市联动

技术:

遍历数组

设置或者获取value属性

设置获取获取标签体的内容

创建一个元素:

案例代码实现

文档操作:

内部插入

外部插入

删除

案例5-左右移动

步骤分析:

1.确定事件

2.编写函数:

技术分析:

案例代码实现

案例4-省市联动

步骤分析:

1.确定事件省份的下拉选变化的时候 change

2.编写函数

a.获取当前省份的value值

b.通过数组获取该省下的所有市返回值:数组

c.遍历数组,拼装成option元素追加到市下拉选即可

注意:每次改变的时候初始化市的值.

///////////////////////////

技术:

遍历数组

数组.each(function(){});

$.each(遍历数组,function(){});

注意:

each的function中可以加两个参数 index和dom

index是当前遍历的索引值

dom指代的是当前遍历的dom对象(开发中一般使用this即可)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>05-可见性过滤选择器.html</title>

$(function(){

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

//alert($("input:hidden").size());

$("input:hidden").each(function(index,dom){//可见性过滤,两个参数可以有可以没有，没有的话，用this即可

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

//alert(index);

//alert(dom.value);

});

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

$.each($("input:hidden"),function(){

//$.each(遍历数组,function(){});------$("input:hidden"):是一个数组

alert($(this).val());

});

</script>

</head>

<body>

</body>

</html>

设置或者获取value属性

jquery对象.val():获取

jquery对象.val("...."):设置

设置获取获取标签体的内容

html()

text()

xxxxx():获取标签体的内容

xxxxx("....."):设置标签体的内容

设置的区别:

html:会把字符串解析

text:只做为普通的字符串

获取的区别:

html:获取的html源码

text:获取只是页面展示的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

var $username=$("[name='username']");

$username.prop("value","嘘嘘");

//3.1 获取 username的value属性的值

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

//3.2 设置 username的默认值为"许多多"

$username.val("新设置");

//3.3通过html获取div标签体的内容

var $div=$("div");

//alert($div.html());

//3.4通过html设置div标签体的内容

//$div.html("已满18，xxxx");

//3.5通过text获取div标签体的内容

//alert($div.text());

//3.6通过text设置div标签体的内容

$div.text("已满18，xxxx");

//3.7 两者设置值的区别

//3.8 两者获取值的区别

});

</script>

.textClass {

background-color: #ff0;

}

</style>

</head>

<body>

</tr>

<tr>

</tr>

<tr>

<td>

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

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

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

<div>

未满18慎进

</div>

<span id="sp">外span<a href='#'>内超链</a></span>

</body>

</html>

创建一个元素:

$("<标签></标签>")

var $div=$("div");

$div.html($("<a href='#'>").html("我"));//注意：单引号和双引号相间输入

案例代码实现

<!DOCTYPE html>

<html>

<head>

// 定义二维数组:

var arr = new Array(4);

arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");

arr[1] = new Array("长春市","吉林市","四平市","通化市");

arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");

arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");

//全局变量

</script>

</head>

$(function(){

$("[name='pro']").change(function(){

var $city=$("[name='city']");

//初始化

$city.html($("<option>").html("--请选择--"));

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

var cities=$(arr[pro]);//需要的是jQuery数组

cities.each(function(){

//$city.html($("<option>"+this+"</option>"));//只能打印出一个

$city.append($("<option>"+this+"</option>"));//需要初始化

});

</script>

<body>

姓名:<input name="username" value="xuduoduo"/><br>

密码:<input type="password" name="password" value="123" disabled="disabled"><br>

性别:<input type="radio" name="sex" value="1" checked="checked">男

<input type="radio" name="sex" value="0">女

<br>

爱好:<input type="checkbox" name="hobby" value="eat">吃

<input type="checkbox" name="hobby" value="drink" checked="checked">喝

<input type="checkbox" name="hobby" value="sleep" checked="checked">睡

<br>

头像:<input type="file" name="photo"><br>

籍贯:

</select>

</select>

<br>

自我介绍:

<br>

</form>

</body>

</html>

<!--

-->

文档操作:

内部插入

a.append(c):将c插入到a的内部(标签体)后面

a.prepend(c):将c插入到a的内部的前面

appendTo

prependTo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>01_内部插入节点.html</title>

$(document).ready(function(){

//1.在city的后面内部追加反恐

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

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

//$city.append($fk);

//2.在city的前面内部插入反恐

$city.prepend($fk);

});

</script>

</head>

<body>

</ul>

</ul>

<div id="foo1">Hello1</div>

</body>

</script>

</html>

外部插入

a.after(c):将c放到a的后面

a.before(c):将c放到a的前面

a.insertAfter(c)

a.insertBefore(c)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>02_外部插入节点.html</title>

$(document).ready(function(){

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

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

//1.在 p2 的后面插入 city

//$p2.after($city);

//2.在 p2 的前面插入 city

$p2.before($city);

});

</script>

</head>

<body>

</ul>

<p id="p3">I would like to say: p3</p>

<p id="p2">I would like to say: p2</p>

<p id="p1">I would like to say: p1</p>

</body>

</script>

</html>

删除

empty() 清空元素

remove() 删除元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

$(document).ready(function(){

//1.清空ul

//$("#city").empty();

//2.移除天津 remove

$("#tj").remove();

});

</script>

</head>

<body>

</ul>

<p class="hello">Hello</p> how are <p>you?</p>

</body>

</script>

</html>

案例5-左右移动

步骤分析:

1.确定事件

单击事件

2.编写函数:

移动一个:

右边的下拉选追加一个左边的选中的第一个

移动多个:

左边选中的追加到右边的下拉选中

移动全部:

将左边的所有option追加到右边的下拉选中

技术分析:

表单对象属性过滤选择器

:enabled 可用的

:disabled 不可用

:checked 选中的(针对于单选框和复选框的)

:selected 选中的(针对于下拉选)

案例代码实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

$(function(){

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

$("#left>option:selected:first").appendTo($("#right"));

});

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

$("#right").append($("#left option:selected"));

});

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

$("#right").append($("#left option"));

});

</script>

<style>

input[type='button']{

width:50px;

}

</style>

</head>

</html>

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

千岁不倒翁

学生

手记
篇

粉丝

60

获赞与收藏

386

关注作者，订阅最新文章

相关文章推荐

jquery复习总结

jquery复习总结一

Jquery总结

jquery 快速入门学习总结

jquery学习：jquery选择器总结

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

jquery复习总结

案例4-省市联动

技术:

遍历数组

设置或者获取value属性

设置获取获取标签体的内容

html()

text()

创建一个元素:

案例代码实现

文档操作:

内部插入

外部插入

删除

案例5-左右移动

步骤分析:

1.确定事件

2.编写函数:

技术分析:

表单对象属性过滤选择器

案例代码实现

相关文章推荐

阅读免费教程