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

辣可乐少加冰

已于 2023-06-13 09:23:30 修改

阅读量1.6w

点赞数 18

分类专栏：后端 jQuery与javascript分辨文章标签： jQuery

于 2020-10-30 20:34:16 首次发布

本文链接：https://blog.csdn.net/GengFuGuo/article/details/109392445

版权

后端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jQuery与javascript分辨

1 篇文章 0 订阅

订阅专栏

文章目录

javascript与jQuery的比较区别
本质区别
javascript与jquery的css
语法差异
jQuery 中的AJAX

javascript与jQuery的比较区别

在这里插入图片描述

本质区别

JavaScript是通过<script></script>标签插入到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、操作元素节点不同：

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">吼吼</li>
            <li>轰轰</li>
        </ul>
    </div>
</body>

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 = "<span style='color: #096'>呵呵</span>";
    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("<p>我是子元素</p>")//输出  我是子元素
$(".box").text("<p>我是子元素</p>")//输出   <p>我是子元素</p>

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}
    ] 
}

承蒙厚爱，方法是总结的，希望有帮助

一起努力 🥰

文章哪里有问题请指出来，再修改呢 ❤️

谢谢！🥰

辣可乐少加冰

关注

18
点赞
踩
67

收藏

觉得还不错? 一键收藏
打赏
5
评论
jQuery与javascript的区别＋案例锋芒毕露

javascript与jQuery的比较区别一：本质区别JavaScript是通过二、javascript与jquery的cssjs设置cssjacascript 设置css就是在style 中设置jquery设置css（如下）选择器.css("属性名","属性值") 单个属性设置选择器.css({ "属性名"：”属性值“, "属性名"：“属性值”})案例$("div").css("border","1px solid #000");$("
复制链接

扫一扫