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

简介: jQuery与javascript的区别+案例 锋芒毕露
$(“div”).css(“border”,“1px solid #000”);
$(“#box”).css({
“width”:“100px”,
“height”:“100px”,
“background-color”:“red”
})

语法差异

=================================================================

A、JavaScript与jQuery常用的操作元素

| javascript事件 | jQuery事件 |
| — | — |
| 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(‘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”)//索引号为偶数的元素
  • red
  • 1
  • 2
  • 输入:
// 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(“
我是子元素
”)//输出我是子元素

  • E、给一个节点绑定事件
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”);
}
});

  • jQuery 中的AJAX
    ==========================================================================
    ajax简介:
    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
    可以在不刷新整个页面的情况下和服务器进行局部的数据交互。
    类似的功能还有 验证短信的发送、百度搜索的关键字推举、无刷新的分页等等……等都可以使用ajax技术实现。
    语法:
相关文章
|
14天前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
32 2
|
18小时前
|
JavaScript 前端开发 开发者
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
3 0
|
23小时前
|
JavaScript 前端开发 搜索推荐
JS经典案例-无缝滚动轮播图(纯JS)
JS经典案例-无缝滚动轮播图(纯JS)
8 0
|
1天前
|
JavaScript 前端开发 安全
JS 严格模式和正常模式的区别
JS 严格模式和正常模式的区别
|
1天前
|
JavaScript 前端开发 索引
JS中的substr()和substring()函数有什么区别
JS中的substr()和substring()函数有什么区别
|
3天前
JS-函数封装数组求和案例
JS-函数封装数组求和案例
|
12天前
|
存储 前端开发 JavaScript
[初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维
【6月更文挑战第2天】这是一个前端小项目合集,包括图片轮播器、动态列表、模态框、表单验证等14个项目,旨在帮助初学者提升编码技能和实战经验。每个项目提供关键提示,如使用HTML、CSS和JavaScript实现不同功能,如事件监听、动画效果和数据处理。通过这些项目,学习者可以锻炼前端基础并增强实际操作能力。
15 2
|
15天前
|
JavaScript 前端开发 Java
Java和JavaScript区别与联系
Java和JavaScript区别与联系
11 0
|
24天前
|
JavaScript 前端开发 索引
JavaScript与Object C的区别
JavaScript与Object C的区别
11 1
|
25天前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
24 0