jQuery与javascript的区别＋案例 锋芒毕露
文章目录
- javascript与jQuery的比较区别
- 本质区别
- javascript与jquery的css
- 语法差异
- jQuery 中的AJAX
javascript与jQuery的比较区别
本质区别
-
JavaScript是通过
标签插入到html页面中，支持当前所有主流浏览器的轻量级的编程语言 -
jQuery是一个JavaScript函数库 （框架），使用jQuery，需要在html页面引入一个jQuery库
javascript与jquery的css
-
js设置css
jacascript 设置css就是在style 中设置
-
jquery设置css（如下）
选择器.css("属性名","属性值") 单个属性设置
选择器.css({
"属性名"：”属性值“,
"属性名"：“属性值”
})
案例
$("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、操作元素节点不同：
- "first">哈哈
- "cls" name ="na">啦啦
- "cls">呵呵
- "na">嘿嘿
"div">
- "cls">吼吼
- 轰轰
- 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 标签的值，也就是输入时的值
<body>
<ul>red
<li id="aa" ><span style="color:red">1</span></li>
<li id="eight_times" ><span style="color: blue">2</span> </li>
</ul>
输入：<input type="text" id="input" value="hello">
</body>
// JavaScript 方法
<script type="text/javascript">
console.log('aa', document.getElementById('aa').innerHTML);
document.getElementById('aa').innerHTML = "呵呵";
console.log('aa text', document.getElementById('aa').innerText);
document.getElementById('aa').innerText = '123';
console.log('bb',document.getElementById("input").value);
</script>
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({
type:'get/post',//post和get请求
url:'xxxx',//路径
data:{
xx:xx//传递后台的数据
},
dataType:'xx',
success:function(){
},
error:function(){
}
})
type里面有两种方式 get或者post
url是后台请求的地址
data是传递给后台的数据 可以省略
dataType是后台返回给前台的数据类型
success是成功处理函数
error是错误处理函数
JSON数据格式：
{
“id”:1,"name":"tom","score":1}
{
“money”:[
{
“id”:1,"name":"tom","score":2},
{
“id”:2,"name":"jim","score":3},
{
“id”:3,"name":"jack","score":4}
]
}
承蒙厚爱，方法是总结的，希望有帮助
一起努力
文章哪里有问题请指出来，再修改呢 ❤️
谢谢！