标签：jquery
目录
jquery和html的整合
jquery入门
获取一个jquery对象
dom对象和jquery对象之间的转换
页面加载:
派发事件:
案例：
jquery中效果:
隐藏或展示
滑入或滑出
淡入或淡出
弹出广告案例
案例1-步骤分析（定时器）
选择器总结:
基本选择器
层次选择器
基本过滤选择器:
内容过滤:
可见过滤:
属性过滤器:
表单过滤:
案例2-隔行换色
属性和css操作总结:
对属性的操作:
对css操作:操作元素的style属性
案例3-全选或者全不选(prop操作属性)
案例4-省市联动
技术:
遍历数组
设置或者获取value属性
设置获取获取标签体的内容
创建一个元素:
案例代码实现
文档操作:
内部插入
外部插入
删除
案例5-左右移动
步骤分析:
1.确定事件
2.编写函数:
技术分析:
案例代码实现
jquery是单独的js文件
通过script标签的src属性导入即可
<script src="../js/jquery-1.11.0.min.js"></script>
$("选择器") 或者 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对象
方式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> |
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.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();
2.编写展示广告方法
获取div,然后调用效果方法
设置另一个定时器 隐藏
3.编写隐藏广告的方法
获取div,然后调用效果方法
<script src="../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="../img/ad_.jpg" width="100%" /> </div> |
本文出自 “秦斌的博客” 博客，谢绝转载！
标签：jquery
原文地址：http://qinbin.blog.51cto.com/11773640/1949981
