JS和jQuery用法区别

目录

• JS和jQuery用法区别
  • 外观区别
  • 查找元素
  • 操作标签
  • 操作内容
  • 操作属性
  • 操作位置
  • 操作样式
  • 事件

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>