dom中获取元素的方式： document.getElementById(‘id的值’);根据id获取元素，一个。 document.getElementByTagName(‘标签的名字’);根据标签名获取元素，多个 document.getElementByName(‘name属性值’);根据name属性值获取元素，多个 document.getElementByClassName(‘类样式的名字’);多个
jQuery获取元素的方式：通过各种选择器来获取元素 1，id选择器—–>(“#id的值”）；一个 2，标签选择器—–>(“标签的名字”）；多个 3，类选择器—–> (”.类样式的名字”）；多个常用： ("#btn"）， (“div”）, (".cls"）,$(“*”）获取所有元素。
$(function() { $("#btn").click(function() { $(this).text("这是一个有颜色的div");//.text相当于DOM中的innerText或者是textContent $("#dv").css("backgroundColor","yellowgreen");//.css设置元素样式 $("p").text("都是p"); $(".cls").css("backgroundColor","yellow"); }); })1, .text(); .text相当于DOM中的innerText或者是textContent 如果小括号中写内容，就是设置文字内容 如果什么也没写，表示获取这个元素中的文字内容。 console.log($(this).text());
2, .html(); 相当于innerHTML。 小括号中可以直接写标签的字符串内容，就是设置div中的元素内容 不写就是设置。 3，.val()方法， 小括号中写内容就是设置元素的value属性。 不写就是获取元素的value属性值。 4， .css()方法， ① 该方法如果只是设置一个样式的属性和值，那么这个方法写两个参数，第一个参数是属性，第二个参数是值。 ② 可以直接写键值对的方式 $(“#dv”).css({“width”:”300px”,”height”:”200px”,”backgroundColor”,”green”});
层级选择器： (“#dv p”)获取的是dv中所有的p标签(“#dv>p”)获取的是dv中直接的子元素。 (“#dv+p”)获取的是dv后面的第一个p标签元素。(“#dv~p”)获取的是dv后面所有直接的兄弟元素p标签元素。
高亮显示案例：
$(function() { $("#uu>li").mouseover(function() { $(this).css("backgroundColor","yellowgreen"); }); $("#uu>li").mouseout(function() { $(this).css("backgroundColor",""); }); $("#btn").click(function() { $("body *").css("backgroundColor","yellowgreen"); }); })Jq day03-11, 下拉菜单： .children(“ul”);子元素中的标签 .show(500); hide(500);鼠标经过显示隐藏。 奇数偶数选择器案例： ：even偶数 ：odd奇数
写在双引号内：(“#u1>li:even”)； 索引选择器： eq(3)获取索引元素 gt(3)索引大于3的所有元素 lt(3)索引小于3的所有元素(“#u1>li: eq(3)”)；
1，下拉菜单案列： show(); hide(); ,2，精品展示案例： Var Index =$(this).Index();当前元素的索引值。 :eq(“+index+”)获取索引值 :eq(“+index+”)”).siblings(“li”)，获取到索引的当前元素的其他兄弟元素。 ,3，高亮显示案例： Opactity：0.5
.find()方法，针对当前的元素找里面的一些其他元素 .find(“li”).css(); ,4，好友面板切换： 找到ul下的li下的ul下的li全部隐藏。 Ul下的直接的子元素li，注册鼠标点击事件 当前的li下的ul下的所有的li显示， (this).children(“ul”).find(“li”).show(500);当前的li的兄弟元素下的ul下的所有的li显示， (this).siblings(“li”).children(“ul”).find(“li”).show(500); ,5，手风琴案例： 思路：鼠标进入某区域，该区域变宽，同时其他区域变窄。 鼠标离开后，所有区域变回原样。 兄弟100px； 当前800px； 恢复：240px；
