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;