$("h2").css("background-color", "#CCFFFF").next().css("display", "block");
示例：设置元素样式
<head lang="en"> <meta charset="UTF-8"> <title></title> <!--引入jQuery,"js/jquery-2.2.4.js"文件--> <script src="js/jquery-2.2.4.js" type="text/javascript"></script> <style> .mm{ border:5px solid #000 } </style> </head> <body> <img class="first" id="img" src="../html/shop_41.png" alt="默认文字" title="悬浮文字"style="width: 200px;"/> <script> //js 方法一：Javascript 单击动态添加样式 var m=document.getElementsByClassName("first")[0]; m.onclick=function(){ // 设置图片的边框样式为 5px solid red. this.style.border="5px solid red"; } // jQuery，鼠标悬浮后特效 $(".first").mouseover(function(){ $(".first").css("border","5px solid yellow") }) </script> </body>ready简写 $(function(){
})
在选择器中特殊符号需要转移。“\”
选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果
jQuery中和DOM中写法区别
使用CSS()指定的额元素设置样式
$(this).css( "border" , "5px solid #f5f5f5" ); $(this).css( { "border" : "5px solid #f5f5f5" , "opacity" : "0.5" } ); // JSON格式
opacity 0~1之间的数字 透明度。对象的名称JSON可以中括号开始和花括号开始 JSON(JavaScript Object Notation)一种轻量级的数据交互格式 点号表示法来获取
实例：
var json={ "students":[ {"name":"zs","age":"20"}, {"name":"ls","age":"19"} ] } console.log(json.students[0].age) alert(json.students[1].name); 追加和移除样式 addClass(“class”) 或 addClass(“class1 class2 .. “) -removeClass(“class”) 或 removeClass(“class1 class2 .. “)多个class用空格分开
<head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-2.2.4.js"></script> <style> .bg{ background: cornflowerblue; } .color{ color:yellow; } </style> </head> <body> <div>jQuery追加和移除addClass样式</div> <script> //单机追加样式、双击移除样式 $("div").click(function(){ $("div").addClass("bg color"); }).dblclick(function(){ $(this).removeClass("bg color") }) </script> </body>- 创建节点元素 - 工厂函数 ()用于获取或创建节点− (selector)：通过选择器获取节点 - (element)：把DOM节点转化成jQuery节点− (html)：使用HTML字符串创建jQuery节点 - 插入子节点 - 元素内部插入子节点 - (A).append(B)将B追加到A中− (A).appendTo(B) 将A追加到B中 - (A).prepend(B)将B前置插入到A中− (A).prependTo(B) 将A前置插入到B中 - 元素外部插入同辈节点 - (A).after(B)将B插入到A之后− (A).insertAfter(B) 将A插入到B之后 - (A).before(B)将B插入至A之前− (A).insertBefore(B) 将A插入到B之前 - 删除节点 - remove()：删除整个节点 - detach()：删除整个节点，保留元素的绑定事件、附加的数据 - empty()：清空节点内容 - 替换节点 - replaceWith()和replaceAll()用于替换节点 - 复制节点：clone()用于复制节点 - (A).clone(true).appendTo(B);//参数true表示复制其事件∗clone()有个副作用就是会复制id，要么避免对有id的元素克隆，要么使用class代替id的作用∗−属性操作−attr()获取或设置匹配元素的属性值−removeAttr()匹配的元素中删除一个属性− (selector).removeAttr( “属性名称” );
// 获取元素的某属性的值 $(selector).attr("属性名"); //设置元素的一个属性值 $(selector).attr("属性名","值" ); // 设置多个属性值 $(selector).attr( { "属性1" : "值1" , "属性2" : "值2" } ); 遍历子元素 $(A).children()方法可以用来获取元素的所有子元素，不考虑后代元素遍历同辈元素 $(A).next() 用于获取紧邻A之后的元素$(A).prev() 用于获取紧邻A之前的元素$(A).siblings() 用于获取位于A前面和后面的所有同辈元素遍历前辈元素$(A).parent()：获取A的父级元素 (A).parents()：获取A的所有祖先元素，包括父级元素 (A).parents(“B”) 所有父级元素中的B级元素其他 jQuery遍历 – each()以每一个匹配的元素作为上下文来执行一个函数 <button>点击显示图片</button> <p></p> <img src="" alt=""/> <img src="" alt=""/> <script> $("button").click(function(){ $("img").each(function(i,elem){ this.src="img/index_"+i+".jpg" }) }) </script> 查找方法 – find() 搜索所有与指定表达式匹配的元素 $(“p”).find(“span”); // 在所有p元素的后代节点中查找span元素CSS-DOM操作 除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法 .height() 不带单位.width() .offset() 返回一以像素为单位的top和left 坐标。此方法仅对可见元素有效。jQuery事件是对JavaScript事件的封装，常用事件分类如下： - 基础事件 - window事件 - 鼠标事件 - click(fn) 单机鼠标时 - mouseover(fn) 鼠标移过时 - mouseout(fn) 鼠标移除时 - 键盘事件 - keydown() 按下键盘时 - keyup() 释放按键时 - keypress() 产生可打印的字符 - 表单事件 - focus() 获得焦点 - blur() 失去焦点 - submit() 表单提交时 - 复合事件是多个事件的组合 - 鼠标光标悬停 - 鼠标连续点击
示例：简单实现购物车添加删除操作
// <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td><label><input type='checkbox'/>全选</label></td> <td>商品信息</td> <td>单价</td> <td>数量</td> <td>操作</td> </tr> <tr> <td><input type='checkbox'/></td> <td>电脑</td> <td>5000</td> <td><input type='text' value='1'></td> <td><a href="#">删除</a></td> </tr> </table> <button>点击新增</button> <script> $("button").click(function(){ // 声明变量，存储新增行，变量中全用单引号，方便拼接。（必须放在单击事件内，否则只能生成一次） var newnode=$( "<tr>"+ "<td><input type='checkbox'/></td>"+ "<td>电视</td>"+ "<td>3000</td>"+ "<td><input type='text' value='1'></td>"+ "<td><a href='#'>删除</a></td>"+ "</tr>" ); // 新增节点 $("table").append(newnode) }); // 使用事件委托，删除节点 $("table").on("click","a",function(){ $(this).parents("tr").remove(); }) </script> </body>off()方法 – 解除事件绑定 (selector).off(events,[selector],[handler]) (selector).off(events,[selector]) (selector).off(events) (selector).off()
常用on进行绑定
鼠标光变悬停事件：hover(fn1,fn2)
相当于mouseover与mouseout事件的组合fn1,鼠标悬停mouseover时的方法fn2,鼠标离开mouseover时的方法 鼠标连续click事件（过时） toggle()方法 可以切换元素 toggleClass() 改变class