关于Jvav、JQuery

最新推荐文章于 2023-08-20 13:55:07 发布

果董

最新推荐文章于 2023-08-20 13:55:07 发布

阅读量458

点赞数 2

分类专栏： jQuery学习笔记文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_49770265/article/details/116235478

版权

笔记同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

jQuery学习

8 篇文章 0 订阅

订阅专栏

关于Jvav、JQuery

JavaScript和jQuery的认识

javaSript是一门编程语言，jquery是javaSript中的一个库，jquery是JavaScript中的一个子集，

也就是说jquery是javaSript的一部分，jQuery的封装，给我们带来方便的操作，提高了开发的效率性。

获取对象

Js:

通过js方法获取的元素叫做js对象

Var div = document . getElementsByTagName(“div”);

Var box=document . getElementsByClassName(“box”);

Var mode=document . getElementById(“mode”);

jQuery:

通过jQuery方法获取的元素叫做jQuery对象

Var div1 = $(“div”);

Var box1 = $(“box”);

Var mode1 = $(“#mode”);

总结：以上可以的得出jQuery是一个框架，它对JS进行了一个封装，

使得更加方便，要是说JS是父亲的话，那么jquery是儿子。

添加属性和移除属性

Js:

Var box = document . getElementById(“mode”);

添加class属性与属性值

box setAttribute(“class”,”wrapper”);

获取box元素的class的属性值

Var str = box.getAttribute(“class”);

Console.log(str);控制台输出属性值

js移除属性

box .removeAttribute(“id”);

box .removeAttribute(“class”);

jQuery:

$(#box).attr(“index”,”befol”);

获取box元素的index的属性值

Var index = $(“#Box”).attr(“index”);

Console.log(index);控制台输出属性值

jQuery移除属性

#(“#box”).removeAttr(“index”);

添加样式

Html <div id="height">div标签</div>

Js:

window.onload = function () {

var box = document.getElementById("height");

height.style.width = "150px";

height.style.height="150px";

height.style.backgroundColor = "red";

height.style.color = "#fff";

height.style.fontSize = "26px";

}

jQuery:

$(function(){ //简写的jQuery加载事件

$(“#box”).css({width:”150px”,height:”150px”,backgroundColor:”red”,color:”#fff”,fontSize:”30px”,});

});

jQuery的加载事件 $(document).ready(function(){ });

以上的样式设置得：

(innerText、innerHTML)的讲解

Js:

Window.onload = function(){

Var lethe = document.getElementById(“lethe”);

lethe.innerText=’<a href=”#”>可以追加文本</a>’

Var lethee = document.getElementById(“lethee”);

lethee.innerHTML = ’<a href=”#”>可以追加一个标签</a>’

}

jQuery:

$(“#lethe”).html(‘<a href=”#”>可以追加文本</a>’)

Var lethe = $(“#lethe”).html();可传入参数

Console.log(lethe);在控制台输出 html

$(“#lethee”).text(“<a href=”#”>可以追加一个标签</a>”);

$(“#lethee”).text();可传入参数 text

input的讲解

<input type=”text”name=”name” value=””/>文本框

<input type=”checkbox”name=”name” value=””/>复选框

<input type=”radio”name=”name” value=””/>单选框

<input type=”color”name=”name” value=””/>颜色框

<input type=”unmber”name=”name” value=””/>数学框

<input type=”button”name=”name” value=””/>按钮

val();

Document.getElementsByTagName(“input”)[0].value;

$(“input”).val(“1234567890”);

$(“input”).val();可传入参数

Js、jQuery的转换

js对象转为jQuery对象：$(js对象);

js对象要使用jQuery里面的方法就需要将js对象转换为jQuery对象

jQuery转为js对象 : div.get(0);

jquery对象要使用js里面的方法就需要将jQuery对象转换为js对象

jQuery绑定的点击事件

js:

window.οnlοad=function(){

var letai = document.getElementById("box");

letai . οnclick=function(){

var modal = document . getElementById("letai ");

modal.style.display="block";

}

}

jQuery :

$("#btn").click(function(){

$("#box").toggleClass("wrapper"); 如果存在（不存在）就删除（添加）一个类。

var lemove = $("#box").hasClass("wrapper"); 检查当前的元素是否含有某个特定的类，如果有，则返回true,没有返回false。

console.log(lemove);

})