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属性导入即可

jquery入门

获取一个jquery对象

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

<body>

</body>

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

alert($username.val());

</script>

</html>

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

dom对象===>jquery对象

$(dom对象)

jquery对象===>dom对象

方式1:

jquery对象[index]

方式2:

jquery对象.get(index)

<body>

</body>

/* 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>

$(function(){

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

alert("123");

});

</script>

</head>

<body>

</body>

</html>

案例：

<!DOCTYPE html>

<html>

<head>

#e02{

border: 1px solid #000000;

height: 200px;

width: 200px;

}

</style>

$(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>

<hr/>

<hr/>

</body>

</html>

jquery中效果:

隐藏或展示

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

滑入或滑出

slideDown(毫秒数):向下滑入

slideUp(毫秒数):向上滑出

淡入或淡出

fadeIn(int):淡入

fadeOut(int):淡出

$(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>

</body>

弹出广告案例

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

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

2.编写展示广告方法

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

设置另一个定时器隐藏

3.编写隐藏广告的方法

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

$(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>

jquery复习总结一

jquery和html的整合

jquery入门

获取一个jquery对象

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

页面加载:

派发事件:

案例：

jquery中效果:

隐藏或展示

滑入或滑出

淡入或淡出

弹出广告案例

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