Jquery 选择器 事件 DOM操作 基本知识
这里简单的举了一些实例，方便查看和浏览：
首先是HTML代码：
<style> .div1 { width:100px; height:100px; background-color:red; border:3px solid black; float:left; margin:10px; } </style> </head> <body> <form id="form1" runat="server"> <div class="big"> <input type="button" id="btn1" value="按钮" /> <div class="div1">aa</div> <div class="div1">bb</div> <div class="div1" id="d1">cc</div> <div class="div1"><a></a>dd</div> <div class="div1" id="d2">ee</div> </div> </form> </body> </html>
下面就是Jquery代码：
一：基本选择器和过滤选择器：
//这里是给每一个选择器.div1都附上点击事件，以前时候需要遍历，现在不需要遍历，直接能赋点击事件，通过id来赋值，就把下面的. 改成#号就可以 如果是标签选择器，就是Tagname那个，里面的就是$('div') $(".div1").click(function () { alert("aaa"); }); //id选择器 $("#div1").click(function () { alert("aaa"); }); //标签选择器 $("div1").click(function () { alert("aaa"); }); //如果是两个选择器要执行一样的事件，那就用逗号隔开。 $('#d1,#d2').click(function () { alert('哈哈哈哈'); }); //执行某个选择器的下一级用空格表示 $(".big #d1").click(function () { alert("哈哈啊"); }); //过滤选择器： //只赋第一个div的事件 $(".div1:first").click(function () { alert("哈哈啊"); }); //只赋最后一个 $(".div1:last").click(function () { alert("哈哈啊"); });
//等于任意个 eq() ,按索引来 //第一个： $(".div1:eq(0)").click(function () { alert("哈哈啊"); }); //最后一个： 可以写出他的长度。有多少个div $('.div1:eq(' + $('.div1').length-1 + ')').click(function () { alert('aaaa'); }); //上面的也可以写成： 如果写一个循环，直接把下面的1换成i就可以了、直接能写出所有的div $('.div1').eq(1).click(function () { alert("aaa"); }); //大于：gt(),大于第几个开始,这里举的例子是从索引第二个开始以后的。 $('.div1：gt(2)').click(function () { alert("aaa"); }); //小于：:lt(),小于第几个，小的所有 $('.div1：lt(2)').click(function () { alert("aaa"); }); //排除，排除第几个，写出其他的所有。 //这里是直接放的选择器。 $('.div1:not(.#d1)').click(function () { alert("aaa"); }); //这里是放第几个：排除第几个出来； $('.div1:not(.div:eq(3))').click(function () { alert("aaa"); }); //按索引奇偶数来看div; //奇数： $('.div1：odd').click(function () { alert("aaa"); }); //偶数： $('.div1：even').click(function () { alert("aaa"); }); //属性过滤： //属性名过滤：按属性名字进行过滤 $('.div1[id]').click(function () { alert("aaa"); }); //属性名对应值过滤： 所有type=button的 $('.input[type=button]').click(function () { alert("aaa"); }); //内容过滤： //contain(”字符串“) 所有内容包含d的，注意是包含的内容 $('.div1：contains("d")').click(function () { alert("aaa"); }); //子元素：has(选择器) 包含a标签的 $('.div1：has(a)').click(function () { alert("aaa"); });
二：事件：
//事件：事件和JS基本一样，就是把on去掉就是Jquel的 //基础事件 $(".div").mouseover(function () { }); //复合事件：不经常用 hover和Js的基本一样，就是鼠标移上去变颜色 $("div1").hover(function () { $(this).css("background-color", "yellow"); }, function () { $(this).css("background-color","red"); }); // toggle点击事件的循环执行点第一下黄色，第二下红色，但是呢这里用的Jquel版本是1.11.1不行，得用1.7.2的 $(".div1").taggle(function () { $(this).css("background-color","yellow") }(function () { $(this).css("background-color","red") }));
