爱站程序员基地– $(this)
$(this) ==>表示当前操作的对象
注意点 jquery的事件 都没有前缀on
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script></head><body><ul><li>AA</li><li>BB</li><li>CC</li></ul><script>//jQuery的事件都没有前缀 on$(\"ul li\").click(function(){//两种方式都可以获取标签中间的内容.html()/.text()//alert($(this).html());// 当前操作的标签alert($(this).text());});</script></body></html>
– jquery 动效
1. show() 显示2. hide() 隐藏3. toggle() 显示 隐藏参数 时间(毫秒值) 第二个参数就是执行这个函数 所触发的事件4. fadeIn() 显示5. fadeOut() 隐藏6. fadeToggle() 淡入淡出的效果7. slideUp() 显示8. slideDown() 隐藏9. slideToggle() 显示 隐藏==>从上到下的显示隐藏的效果
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-1.8.3.min.js\" ></script><style>div{width: 150px;height: 150px;border: 1px red solid;}</style></head><body><div id=\"dd\">1111</div><input type=\"button\" id=\"op1\" value=\"显示\" /><input type=\"button\" id=\"op2\" value=\"隐藏\"/><input type=\"button\" id=\"op3\" value=\"切换\"/></body><script>//显示.show()$(\"#op1\").click(function(){//$(\"#dd\").show(2000,alert(\"111\"));//$(\"#dd\").fadeIn(2000,alert(\"111\"));$(\"#dd\").slideUp(2000,alert(\"111\"));});//隐藏.hide()$(\"#op2\").click(function(){//$(\"#dd\").hide(2000,alert(\"222\"));//$(\"#dd\").fadeOut(2000,alert(\"222\"));$(\"#dd\").slideDown(2000,alert(\"222\"));});//切换 .toggle$(\"#op3\").click(function(){//$(\"#dd\").toggle(2000,alert(\"333\"));//$(\"#dd\").fadeToggle(2000,alert(\"333\"));$(\"#dd\").slideToggle(2000,alert(\"333\"));});</script></html>
-案例
1. 需求： 1.隔两秒种显示 图片 2. 双击这个图片让其隐藏2. 分析: (1) .首先把图片隐藏(2). 使用定是函数 隔两秒种调用jquery的显示方法(3) . 双击的事件dblclick() 需要图片隐藏 其实就是jquery 的隐藏方法
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script><style>img{display: none;}</style></head><body><img src=\"img/img0.png\" id=\"imgs\"/></body><script>//准备函数$(document).ready(function(){setTimeout(\"showImg()\",2000)//setTimeout();})//隐藏的方法function hideImg(){$(\"#imgs\").hide()}//显示的方法function showImg(){$(\"#imgs\").show()}//双击事件隐藏图片$(\"#imgs\").dblclick(function(){//调用隐藏方法hideImg();})</script></html>
-jquery操作css样式
1. 标签.css(\"属性\",\"属性值\") 只能追加一个,注意属性 与属性值 是逗号来进行分割2. ==> 标签.css({\"属性\":\"属性值\",\"属性\":\"属性值\"})3. addClass(类样式的名字) removeClass(类样式的名称)；
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script><style>td{text-align: center;}.getClass1{background-color: greenyellow;}.getClass2{background-color: lightblue;}</style></head><body><table border=\"1px\" width=\"80%\" align=\"center\" cellpadding=\"0px\" cellspacing=\"0px\"><tr ><td>姓名</td><td>年龄</td><td>爱好</td></tr><tr><td>班长</td><td>12</td><td>唱歌</td></tr><tr><td>刘涛</td><td>15</td><td>爬山</td></tr><tr><td>小胖</td><td>18</td><td>旅游</td></tr></table><script>$(document).ready(function(){//1.添加一个属性样式//$(\"tr:first\").css(\"background-color\",\"red\")//2.添加多个属性样式//$(\"tr:first\").css({\"background-color\":\"red\",\"color\":\"white\"})//3.偶数行添加样式//$(\"tr:even\").css(\"background-color\",\"goldenrod\")//4.隔行变色第二种方式//$(\"tr:even\").addClass(\"getClass1\")//4.鼠标移入添加样式//$(\"tr\").mousemove(function(){// $(this).addClass(\"getClass2\")//})//5.鼠标移出添加样式//$(\"tr\").mouseout(function(){// $(this).removeClass(\"getClass2\")//})//4与5操作的是同一个tr所以可以简写$(\"tr\").mousemove(function(){$(this).addClass(\"getClass2\")}).mouseout(function(){$(this).removeClass(\"getClass2\")});})</script></body></html>
-jquery操作标签属性
1. 对象.attr(\"属性\") ==> 表示获取其属性对象.attr(\"属性\",\"属性值\") ==>设置其属性2. 对象.prop(\"属性\")==>表示获取其属性对象.prop(\"属性\",\"属性值\") ==>设置其属性区别: prop 一般是获取的html自带的属性 attr 一般获取是自定义 也就是不是html标签自带 attr 在版本1.5之后官方不再维护 所以建议使用prop4. 实现全选 全不选 反选的功能
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script><style>td{text-align: center;}.getClass1{background-color: greenyellow;}.getClass2{background-color: lightblue;}</style></head><body><input type=\"button\" value=\"全选\" id=\"opt1\"/><input type=\"button\" value=\"全不选\" id=\"opt2\"/><input type=\"button\" value=\"反选\" id=\"opt3\"/><table border=\"1px\" width=\"80%\" align=\"center\" cellpadding=\"0px\" cellspacing=\"0px\"><tr ><td><input type=\"checkbox\" checked=\"\" name=\"box1\"/></td><td>姓名</td><td>年龄</td><td>爱好</td></tr><tr><td><input type=\"checkbox\" checked=\"\" name=\"box1\"/></td><td>班长</td><td>12</td><td>唱歌</td></tr><tr><td><input type=\"checkbox\" checked=\"\" name=\"box1\"/></td><td>刘涛</td><td>15</td><td>爬山</td></tr><tr><td><input type=\"checkbox\" checked=\"\" name=\"box1\"/></td><td>小胖</td><td>18</td><td>旅游</td></tr></table><script>//全选$(\"#opt1\").click(function(){$(\"input[name=\'box1\']\").prop(\"checked\",true);})//全不选$(\"#opt2\").click(function(){$(\"input[name=\'box1\']\"). prop(\"checked\",false)})//反选,先遍历拿到每一个input框的状态然后取反$(\"#opt3\").click(function(){$(\"input[name=\'box1\']\").each(function(){$(this).prop(\"checked\",!$(this).prop(\"checked\"))})//this 表示的是当前的input框//$(this).prop(\"checked\")获取当前每一个input框的状态})</script></body></html>
-jquery遍历
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script></head><body><input type=\"button\" id=\"btn1\" value=\"获取\"/><ul><li>AA</li><li>BB</li><li>CC</li></ul><script>$(\"#btn1\").click(function(){$(\"ul li\").each(function(index){alert($(this).html()+\"***\"+index)})})</script></body></html>
-使用attr()来获取去与设置属性值
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script></head><body><input type=\"button\" id=\"tv_btn2\" value=\"提交\"/><input type=\"text\" id=\"tv1\" /><script>$(\"#tv_btn2\").click(function(){//给输入框填充内容//$(\"#tv_input1\").attr(\"value\",123456)//获取输入框的值alert($(\"#tv1\").attr(\"value\"));})</script></body></html>
-jquery来操作dom
1. append() 向元素末尾来追加标签==>(父子关系) appendTo() ==>追加的内容与标签进行互换位置2. prepend($str); 向元素的前面追加标签==>(父子关系) prependTo()与上面用法是一样的3. after() 在什么之后来追加节点==>(兄弟关系)4. before() 在节点的前面来追加数据==>(兄弟关系);5. remove() 删除本身包含其子标签
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script></head><body><input type=\"button\" id=\"btn1\" value=\"在末尾追加\"/><input type=\"button\" id=\"btn2\" value=\"在元素的前面追加\"/><input type=\"button\" id=\"btn3\" value=\"追加兄弟元素节点后\"/><input type=\"button\" id=\"btn4\" value=\"追加兄弟元素节点前\"/><input type=\"button\" id=\"btn5\" value=\"删除节点\"/><ul id=\"tv_ul\"><li>11</li><li>22</li><li>33</li><li>44</li></ul><script>$(\"#btn1\").click(function(){//父子关系//var str=\"<li>\"+555+\"</li>\" //js对象//js--->jqueryvar $str = $(\"<li>555</li>\");//1.append()追加元素//$(\"ul\").append($str)//2.将什么追加到...中$str.appendTo(\"ul\")})$(\"#btn2\").click(function(){//var $str = $(\"<li>555</li>\");//父子关系//3.在元素的前面追加//$(\"ul\").prepend($str)//4.将什么追加到...中//$str.prependTo(\"ul\")})$(\"#btn3\").click(function(){//兄弟关系//var $str = $(\"<li>555</li>\");//在什么节点之后追加// $(\"ul\").after($str)})$(\"#btn4\").click(function(){//兄弟关系//var $str = $(\"<li>555</li>\");//在什么节点之后追加// $(\"ul\").before($str)})$(\"#btn5\").click(function(){//删除节点，包括删除里面的子元素//删除索引为1的元素值//$(\"#tv_ul li:eq(1)\").remove()})</script></body></html>
-jquery来实现省级联动的效果
<html><head><meta charset=\"UTF-8\"><title></title><script type=\"text/javascript\" src=\"js/jquery-2.1.0.min.js\" ></script></head><body><select onchange=\"showCitys(this.value)\"><option value=\"0\">北京市</option><option value=\"1\">上海市</option><option value=\"2\">广东省</option></select><select id=\"city\"></select><script>function showCitys(num){//需要数组 定义数组var citys = new Array()citys[0]=[\"朝阳区\",\"房山区\",\"海淀区\"]citys[1]=[\"浦东区\",\"宝山区\",\"闵行区\"]citys[2]=[\"天河区\",\"海珠区\",\"荔湾区\"]//得到具体的某一个城市区的数据var city = citys[num];//清空$(\"#city\").html(\"\");//遍历,index索引，data数据源表示 xx区$(city).each(function(index,data){var temp=\"<option>\"+data+\"</option>\"//alert(index+data);//获取需要追加的节点$(\"#city\").append(temp)})}</script></body></html>
