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. Tomcat 80端口被占用

    1.“运行”中输入cmd2.在命令行中输入netstat -ano,得到端口号对应的PID 3.打开任务管理器,点击“查看“菜单,选择“选择列”,给进程列表中添加”PID“列,然后找到PID对应的进程 ...

  2. iOS自适应行高方法及问题

    最近一周被项目的动态高度虐的很惨,感觉浪费了很多时间,但是值得高兴的是对动态高度的使用掌握了好多方法,并且知道了方法之间的区别和优缺点. 1.最常用的: UITableView+FDTemplateL ...

  3. iOS-项目重构(浅谈)

    如何重构 首先,要对程序的一般架构烂熟于心,尤其是MVC,这是基本.还有就是分离存储和网络请求的逻辑. 对于一些常用的控件尽量分离复用,设置开关函数,适当的时候开启,不要的时候关闭,有必要的话还可以 ...

  4. XGBoost原理详解

    原文:https://blog.csdn.net/qq_22238533/article/details/79477547

  5. 网页是如何实现从剪贴板从读取图片并上传到server的

    代码比较简单,原理更简单,不多言请直接看代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  6. DRF-路由

    路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...

  7. Thingsboard源码编译,小白新坑随笔

    在Thingsboard源码编译过程中,遇见的问题总结: 1.Thingsboard Server UI 模块编译,无法执行“npm install ”:出现错误信息:Failed to execut ...

  8. CRLF——http response 拆分攻击(webgoat)

    0x01 什么是CRLF CRLF是“回车+换行”(\r和\n)/(%0d和%0a)的简称. CRLF利用: 正常输入的请求中加入恶意代码,控制HTTP响应header中的字符(Location,Se ...

  9. Java学习笔记-基础语法

    Java基础包含关键字,标识符,注释,常量和变量,运算符 关键字 关键字的定义和特点 定义:被Java语言赋予了特殊含义的单词 特点:关键字中所有字母都为小写 Java的关键字 用于定义数据类型的关键 ...

  10. Java学习笔记-Java概述和环境配置

    基础常识 软件:一系列按照特定顺序组织的计算机数据 和指令的集合 常见的软件: 系统软件:如:DOS,windows,Linux等 应用软件:如:扫雷,迅雷,QQ等 软件的出现实现了人与计算机之间的更 ...