jQ选择器及常见几个方法

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；