JS和jQuery用法区别

外观区别

jQuery与JS最直观的区别就是外观上jQuery对象比js对象多了"$()"。

查找元素

js方法:
var a = document.getElementById("id名"); 返回一个对象
var a = document.getElementsByClassName("class名"); 返回一个对象数组
var a = document.getElementsByTagName("标签名"); 返回一个对象数组
var a = document.getElementsByName("name名"); 返回带有指定名称的对象的集合。 Jquery方法:
var a = $("#id名");
var a = $(".class名");
var a = $("标签名");
var a = $("[属性名=属性值]");

操作标签

js:
classList.add("类名");
classList.remove("类名");
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加 jquery:
$("div").addClass("a1") 添加类名
$("div").removeClass("a1") 移除
$("div").hasClass("a1")
$("div").toggleClass("a1")

操作内容

js方法:

    (1).非表单元素:
a.innerText; 获取文本
a.innerHTML; 获取HTML代码 (2).表单元素:
a.value; 获取
a.value="hello"; 赋值 Jquery方法: (1).非表单元素:
a.text(); //取得第一个匹配元素
a.text("bbbbb");
a.html(); //取得第一个匹配元素当前的html内容
a.html("<div class="a"></div>") // 覆盖所有匹配元素的html内容 (2).表单元素:
a.val();无参数是取值,有参数是赋值。

操作属性

JS里面用来操作属性的方法:

div.setAttribute("","");——设置属性、修改属性

div.removeAttribute("");——移除属性,引号里面写一个属性名

div.getAttribute();——获取属性

jQuery里面用来操作属性的方法:

自定义属性:

添加属性:div.attr({k1: v1, k2:v2});——给这个attr方法加入参数,属性名叫做test,属性的值是aa。

移除属性:div.removeAttr("test");——移除test这条属性。

获取属性:div.attr("test");——在attr方法里面直接写入一个属性的名就可以了。
------------------------------------------------------------------------ 固有属性: a.prop("属性名","属性值"); 添加属性 a.removeProp("属性名"); 删除属性 alert(a.prop("属性名")); 获取属性 a.prop("checked",true); alert(a.prop("checked")); 选择点击事件

操作位置

js:
offsetLeft、offsetTop属性:只可获取,不可设置(类似jQuery的position()方法)
style.left、style.top:既可设置,也可获取。 jquery:
position() 方法:只能获取,不能设置
offset()方法:既能获取,也能设置。获取和设置元素相对于文档的偏移量
scrollLeft()、scrollTop(),滚动方法:既能获取,也能设置
$(element).scrollLeft(200); //设置元素滚动的left值

操作样式


JS里面操作样式的关键字是style。
例: div.style.backgroundColor= "red";
把这个div的背景色设置成为了红色。 jQuery里面操作样式的关键字是css。
例: div.css("background-color","yellow");
把这个div的背景色变为黄色,在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化。 注意:
JS操作样式的方法只能获取内联样式,不能取内嵌的和外部的。
jQuery操作样式的方法可以是内联的也可以是内嵌的。

事件

js:
方式一:
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
方式二:
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script> jQuery:
<input type="button" id="mybutton" value="点我">
<script>
$(function(){
$("#mybutton").on("click",function(e){
alert(e.type)
//在触发该事件的时候,系统会给传给你这个参数,他包含了触发该事件的一些信息
//这里e指代event
})
})
</script>

JS和jQuery用法区别的更多相关文章

  1. jQuery (js 和 jQuery 的区别)

    js 和 jQuery 的区别  主要体现在Dom操作 (jq代表我找到的元素对象)找元素:    js:document.get...    jquery: $(选择器)设定:jq 是jquery对 ...

  2. onload事件与ready事件的区别,原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

  3. 原生JS和JQuery的区别

    1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说 ...

  4. JS和JQUERY的区别

    ①.根据ID取元素 { JS:取到的是一个DOM对象. 例:var div = document.getElementByID("one"); JQUERY:取到的是一个JQUER ...

  5. js与jQuery的区别——每日一记录

    js是一种脚本语言,jQuery是在他基础上的一种框架

  6. 原生js与jquery的区别

    1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel_index_block')[ ...

  7. js与jquery的区别

    var html = $('<a target="_blank" href="' + adCompContent.clickURL + '">< ...

  8. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  9. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Python升级提示Tkinter模块找不到的解决方法

    一.安装tkinter在Linux中python默认是不安装Tkinter模块,复制代码 代码如下:[root@li250-193 ~]# pythonPython 2.6.6 (r266:84292 ...

  2. 每个Xcode开发者应该知道的几个使用技巧

    1.快速打开 快速打开(Open Quickly)命令在Xcode的File菜单中,当然,用快捷键Command+Shift+O会更方便一些.这个命令可以开启一个小窗格用来快速搜索浏览文件.类.算法以 ...

  3. android之Framework问题总结:

    移动开发知识体系总章(Java基础.Android.Flutter) Android Handler消息机制 . Android中为什么主线程不会因为Looper.loop里的无限循环ANR? 1.1 ...

  4. SpringBoot: 17.热部署配置(转)

    spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot应用. devtool ...

  5. 三小时攻克 Kubernetes!

    我保证本文是最详尽的 Kubernetes 技术文档,从我在后台排版了这么漫长的时间就能看出来.废话不多说——牢牢占据容器技术统治地位的 Kubernetes,其重要性想必不言而喻. 以下为译文: 为 ...

  6. vue-cli3项目运行时一直发http://localhost:8080/sockjs-node/info?t=1462183700002请求

    报错如下图: 解决方式: 一.如果是在开发环境,应该是开发的时候网络环境变更导致,比如你切换无线网络,导致开发服务器的IP地址换了,这样开发服务器会不知道如何确定访问源.开发环境中关闭npm dev ...

  7. JavaScript中new运算符的实现

    废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能. 1. 建立一个空的Object对象: 2. 把这个空对象用__proto__链接到原型 3. 用app ...

  8. effective java(第三版)---读书笔记

    第一章 引言 < Effective Java>这本书并不厚,而且并不适合初学者,适合有一定的工作经验的java攻城狮.这本书不是百科全书式的JAVA 手册,而是试图在讲述如何正确.高效地 ...

  9. docker中如何部署mysql

    这篇博文讲很详细了. 链接

  10. 从Odds:比值比推导出Logtic分类的算法

    在从概率模型推导出逻辑回归算法模型的博文中,我试着从李宏毅老师的课程中讲到的概率模型去推导逻辑分类的算法模型.有幸看到另外一篇博文01 分类算法 - Logistic回归 - Logit函数,我了解到 ...