首页 > 代码库 > jquery复习总结一

jquery复习总结一

2024-11-02 21:15:39   208人阅读

目录

jquery和html的整合

jquery入门

获取一个jquery对象

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

页面加载:

派发事件:

案例：

jquery中效果:

隐藏或展示

滑入或滑出

淡入或淡出

弹出广告案例

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

选择器总结:

基本选择器

层次选择器

基本过滤选择器:

内容过滤:

可见过滤:

属性过滤器:

表单过滤:

案例2-隔行换色

属性和css操作总结:

对属性的操作:

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

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

案例4-省市联动

技术:

遍历数组

设置或者获取value属性

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

创建一个元素:

案例代码实现

文档操作:

内部插入

外部插入

删除

案例5-左右移动

步骤分析:

1.确定事件

2.编写函数:

技术分析:

案例代码实现

jquery和html的整合

jquery是单独的js文件

通过script标签的src属性导入即可

<script src="../js/jquery-1.11.0.min.js"></script>

jquery入门

获取一个jquery对象

$("选择器")  或者 jQuery("选择器")

<script src="../js/jquery-1.11.0.min.js"></script>

<body>

<input type="text" id="username" value="jack"/>

</body>

<script>

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

alert($username.val());


</script>

</html>

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

dom对象===>jquery对象

$(dom对象)

jquery对象===>dom对象

方式1:

jquery对象[index]

方式2:

jquery对象.get(index)

<script src="../js/jquery-1.11.0.min.js"></script>

<body>

<input type="text" id="username" value="jack"/>

</body>

<script>

/* var obj=document.getElementById("username");

var $user=$(obj);

alert($user.val()); */

//alert($user.value);


var $u=$("#username");

//var obj=$u.get(0);

var obj=$u[0];

alert(obj.value);

</script>

</html>

 

 

页面加载:

js:

window.onload=function(){}//在一个页面中只能使用一次

jquery 在一个页面中可以使用多次

方式1:

$(function(){...})

方式2:

$(document).ready(function(){});

 

派发事件:

$("选择器").click(function(){...});

等价于 原生js中

dom对象.onclick=function(){....}

掌握事件:

focus

blur

submit

change

Click

 

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(function(){

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

alert("123");

});

});

</script>

</head>

<body>

<input type="button" id="bId" value="点击查看" />

</body>

</html>

 

案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>常见事件</title>

<style type="text/css">

#e02{

border: 1px solid #000000;

  height: 200px;

 width: 200px;

}


</style>

<script src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#e01").blur(function(){

$("#textMsg").html("文本框失去焦点：blur");

}).focus(function(){

$("#textMsg").html("文本框获得焦点：focus");

}).keydown(function(){

$("#textMsg").append("键盘按下：keydown");

}).keypress(function(event){

$("#textMsg").append("键盘按：keypress");

}).keyup(function(){

$("#textMsg").append("键盘弹起：keyup");

});


var i = 0;

$("#e02").mouseover(function(){

$("#divMsg").html("鼠标移上：mouseover");

}).mousemove(function(){

//$("#divMsg").html("鼠标移动：mousemove , " + i++ );

}).mouseout(function(){

$("#divMsg").html("鼠标移出：mouseout");

}).mousedown(function(){

$("#divMsg").html("鼠标按下：mousedown");

}).mouseup(function(){

$("#divMsg").html("鼠标弹起：mouseup");

});


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

$("#buttonMsg").html("单击：click");

}).dblclick(function(){

$("#buttonMsg").html("双击：dblclick");

});


});

</script>

</head>

<body>

<input id="e01" type="text" /><span id="textMsg"></span> <br/>

<hr/>

<div id="e02" ></div><span id="divMsg"></span> <br/>

<hr/>

<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>

</body>

</html>

 

jquery中效果:

隐藏或展示

show(毫秒数) hide(毫秒数)

滑入或滑出

slideDown(毫秒数):向下滑入

slideUp(毫秒数):向上滑出

淡入或淡出

fadeIn(int):淡入

fadeOut(int):淡出

<script src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(function(){

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

//$("#b1Div").hide(1000);

$("#b1Div").toggle(1000);

});


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

//$("#b2Div").slideUp(2000);

$("#b2Div").slideToggle(2000);

});


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

$("#b3Div").fadeOut(1000);

});

})

</script>

</head>

<body>

<input type="button" id="b1" value="显示/隐藏 b1Div" />

<div id="b1Div"></div> <br/>

<input type="button" id="b2" value="滑出/滑入b2Div"/>

<div id="b2Div"></div> <br/>

<input type="button" id="b3" value="淡出/淡入b3Div" />

<div id="b3Div"></div>


</body>

 

弹出广告案例

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

1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();

2.编写展示广告方法

获取div,然后调用效果方法

设置另一个定时器 隐藏

3.编写隐藏广告的方法

获取div,然后调用效果方法

<script src="http://www.mamicode.com/js/jquery-1.11.0.min.js"></script>

<script>

$(function(){

setTimeout(showAd,2000);

});


function showAd(){

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

$("#ad").slideDown(1000);

setTimeout("hideAd()",3000);

}


function hideAd(){

//$("#ad").hide(1000);

$("#ad").slideUp(1000);

}

</script>

</head>

<body>

<div id="ad" style="width:100%;display: none;">

<img src="http://www.mamicode.com/img/ad_.jpg" width="100%" />

</div>



本文出自 “秦斌的博客” 博客，谢绝转载！

jquery复习总结一


联系
我们