| onclick | click |
| onfocus | focus |
| ondblclick（鼠标双击时） | dblclick |
| onmouseover | mouseover |
| onmousemove | mousemove |
| onmouseout | mouseout |
| onkeyup | keyup |
| onkeydown | keydown |
| onkeypress | keypress |
B、操作元素节点不同：
- 哈哈
- 啦啦
- 呵呵
- 嘿嘿
-
- 吼吼
- 轰轰
- 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(‘jQuery first’, $(‘#first’));
console.log(‘nameLi’, $(“li type[name=‘na’]”));
console.log(‘li’, $(‘li’));
$(‘ul’ li:first).css(“color”,“red”);//选择第一个
$(‘ul li:last’).css(“color”,“red”);//选择最后一个
$(‘ul li:eq(2)’).css(“color”,“red”);// 选择指定的 eq里面的是索引号 从0开始
$(“ul li:odd”).css(“color”,“red”);//索引号为奇数的元素
$(“ul li:even”).css(“color”,“red”)//索引号为偶数的元素
C、操作属性节点的不同：
JavaScript使用；
var first = document.getElementById(‘second’).getAttribute(‘id’);
document.getElementById(‘secone’).setAttribute(‘name’, ‘one’);
document.getElementById(‘second’).removeAttribute(‘name’);
jQuery的使用：
console.log(‘first’,$(‘#first’.attr(‘id’));
$(‘#first’).attr(‘name’,‘one’);
$(‘#first’).removeAttr(‘name’);
D、操作文本节点(innerHTML innerText)
JavaScript的使用
innerHTML：获取或添加一个节点的html代码，可以获取css并且是以文本的形式返回
innerText：获取或设置一个节点的html代码，不能获取css
value：取到input 标签的值，也就是输入时的值
- red
- 1
- 2
输入：
// JavaScript 方法
jQuery的使用
.html()取到或设置节点中的html代码
.text()取到或设置节点中的文本
.val()取到input的value属性值i
.val(xxx) 设置input的内容
$(“#txt”).val(‘xxxx’) 设置内容
$(“#txt”).val() 获取内容
$(“.box”).html(“
我是子元素
”)//输出 我是子元素$(“.box”).text(“
我是子元素
”)//输出我是子元素
E、给一个节点绑定事件
JavaScript使用：
document.getElementById(‘aa’).onclick = function (ev) {
alert(‘hello’);
}
jQuery的使用：
1、绑定简单事件
$(‘#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”);
}
});
jQuery 中的AJAX
==========================================================================
ajax简介：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
可以在不刷新整个页面的情况下和服务器进行局部的数据交互。
类似的功能还有 验证短信的发送、百度搜索的关键字推举、无刷新的分页等等……等都可以使用ajax技术实现。
语法：
$.ajax({
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取
项目、讲解视频，并且会持续更新！**
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取
[外链图片转存中…(img-ePNOnfqC-1712939668614)]
