jQuery与javascript的区别＋案例 锋芒毕露

$(“div”).css(“border”,“1px solid #000”);
$(“#box”).css({
“width”:“100px”,
“height”:“100px”,
“background-color”:“red”
})

| javascript事件 | jQuery事件 |
| — | — |
| onclick | click |
| onfocus | focus |
| ondblclick（鼠标双击时） | dblclick |
| onmouseover | mouseover |
| onmousemove | mousemove |
| onmouseout | mouseout |
| onkeyup | keyup |
| onkeydown | keydown |
| onkeypress | keypress |

• JavaScript的使用
• var first = document.getElementById(‘first’);
var cls= document.getElementByClassName(‘cls’);
var li = document.getElementByTagName(‘li’);
var naName= document.getElementsByName(‘na’);
var naName = document.getElementsByName(‘na’);
var queryContent = document.querySelector(‘#a3’);
var queryContents = document.querySelectorAll(‘li’);
• jQuery的使用
• console.log(‘jQuery cls’, (‘.cls′));console.log(‘jQueryfirst′,(‘.cls’)); console.log(‘jQuery first’, (‘#first’));
console.log(‘nameLi’, (“litype[name=‘na′]”));console.log(‘li′,(“li type[name=‘na’]”)); console.log(‘li’, (‘li’));
选择第一个(‘ul′li:first).css(“color”,“red”);//选择第一个(‘ul’ li:first).css(“color”,“red”);//选择第一个 (‘ul li:last’).css(“color”,“red”);//选择最后一个
选择指定的里面的是索引号从开始(‘ulli:eq(2)′).css(“color”,“red”);//选择指定的eq里面的是索引号从0开始(‘ul li:eq(2)’).css(“color”,“red”);// 选择指定的 eq里面的是索引号 从0开始 (“ul li:odd”).css(“color”,“red”);//索引号为奇数的元素
$(“ul li:even”).css(“color”,“red”)//索引号为偶数的元素

// JavaScript 方法
jQuery的使用
.html()取到或设置节点中的html代码
.text()取到或设置节点中的文本
.val()取到input的value属性值i
.val(xxx) 设置input的内容
(“#txt”).val(‘xxxx’) 设置内容(“#txt”).val(‘xxxx’) 设置内容(“#txt”).val(‘xxxx’) 设置内容 (“#txt”).val() 获取内容
我是子元素输出我是子元素(“.box”).html(“我是子元素”)//输出我是子元素(“.box”).html(“ 我是子元素 ”)//输出 我是子元素(“.box”).text(“
我是子元素
”)//输出我是子元素

JavaScript使用：
document.getElementById(‘aa’).onclick = function (ev) {
alert(‘hello’);
}
jQuery的使用：
1、绑定简单事件
(‘#aa’).click(function () { alert(‘hello’); }) 2、on绑定事件(‘#aa’).click(function () { alert(‘hello’); }) 2、on绑定事件(‘#aa’).click(function () { alert(‘hello’); }) 2、on绑定事件 (‘#aa’).on(‘click’, function () {
alert(‘你好’);
}）
3、绑定多个事件
$(“button:eq(0)”).on({
“click”:function () {
console.log(“1”);
},
“mouseover”:function () {
console.log(“2”);
},
“mouseover”:function () {
console.log(“3”);
}
});