新增选择器
window.onload = function(){
var oDiv = document.querySelector('#div1');
alert(oDiv);//弹出[object HTMLDivElement],表示选择了该Div
//如果要选择多个元素用querySelectorAll
var aLi = document.querySelectorAll('.list li');
alert(aLi.length);//8
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
......................................................................................................................................................................
jQuery加载
// alert($);//弹出function (a,b){return new n.fn.init(a,b)}表示JQuery已经引进来了,这是它的一个构造函数
//JS写法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//这是一个div元素
}
//jQuery的完整写法
//比上面JS写法先弹出,因为window.onload是把页面元素加载、渲染完才弹出,而ready()是把所有页面的节点加载完之后就弹出了,不用等渲染了
/*$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:这是一个div元素
})*/
//简写方式
$(function(){
var $div = $('#div');//CSS样式怎么写,这里就怎么写
//html()方法相当于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
......................................................................................................................................................................
jQuery选择器
#div1{
color: red;
}
.box{
color: green;
}
.list li{
margin-bottom: 10px;
}
$(function(){
//选择元素的规则和css样式相同
$('#div1').css({color: 'pink'});
$('.box').css({fontSize: '30px'});
$('.list li').css({
background: 'green',
color: '#fff',
fontSize: '20px',
marginBottom: '10px'
});
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
......................................................................................................................................................................