jsdom查找元素，修改属性，改css样式

查找元素

方法：document.getElementById()=$(‘#id’)、

document.getElementsByTagName()=$(‘div’)、

document.getElementsByClassName()=$(‘.class’);

 

var id=document.getElmentById('a');

console.log(id);

<div id="a"></div>

 

<div class="c" onclick="l">点击</div>//点击后执行onclick里的内容

function l(){

$('.a').text(‘x‘）;//获取元素class=a里面的元素，把里面的元素换成x

$('.a').html('<b>x</b>');//可用html标签

}

修改属性

#id{color:red;}

#id.abc{color:yellow;}

<div class="c" onclick="l">点击</div>

<div id='a' class='aa'>qwe</div>

function i(){

}

 

改图片

<img id="img" src="../../img/images/images/biao_05.jpg" >
<div class="a">
点击
</div>

function cl(){
 $('#img').attr('属性名src','../../img/images/images/0_03.jpg');

//document.getEimentById('img').scr='图片路径'；

document.getEimentById('img').setAttribute（‘src’，‘图片路径’）；

$('#id').addClass('cur');//添加属性，img的id属性再添加一个cur属性
 }

点击变色

<ul>

<li>首页</li>

<li>内容</li>

<li>导航<li>

</ul>

ul li{color：red}

ul li.c{color:yellow}

$('ul li').click(function(){//点击时属性

$(this).addClass('c') ；   //添加class名，removeClass移除class名

});

 改变css样式

 

function cl(){

document.getElmentById('id').style.height='200px';//js写法

$('#id').css('height','200px');//jq写法，改变单个属性值

$('#id').css({'height':'200px','width':'200px'});

}

文本框里的内容,文本框里本来是zhang，点下点击后改成lisi

<input type="text" name="" id="aa" value="zhang" />

<div class="c" onclick="cl()">点击</div>

function cl(){
document.getElementById('aa').value='lisi';//js
$('#aa').val('lisi');//jq
}

//当文本框的值改变，就会触发事件。onmouseover鼠标移入时触发。onmoseout鼠标移开时触发

<input type="text" name="" id="aa" value="zhang" onchange=“change（）” />

<div class="c" onclick="cl()">点击</div>

function change(){
console.log（1）；
}

//点击时显示具体点击哪一个，可以写鼠标移入颜色

<ul>

<li onclick=“cl（this）”>首页</li>

<li onclick=“cl（this）”>产品</li>

<li onclick=“cl（this）”>新闻</li>

</ul>

function cl（that）{

$(that).addClass('cur');

}

点击id名为aa属性时出现弹框hello

<input type="text" name="" id="aa" value="" />

<div class="c" >点击</div>

//js写法
document.getElementById('aa').onclick=function(){
alert('hello')
}

jq写法

$('#aa').click(function(){

alert('hello');})

点击li标签时，弹框出现hhh

//js
// var j= document.getElementsByTagName('li').length
// for(i=0;i<j;i++){
// document.getElementsByTagName('li')[i].onclick=function(){alert('hhh');}
// }

jq

$('li').click(function(){
 alert('hhh');
 })
jq点击li标签显示li标签中的文本内容
$('li').click(function(){
alert($(this).text());//this代表li
})