查找元素
方法：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
})