沙司的第一篇博文
首先呢，先自我介绍一下吧！
大家好！我是可乐沙司，专业：程序员，励志成为高级程序员。现在还只是一个在校大学生，所以我的每一篇博文就是我上课的笔记，如果哪里有错的话，记得私聊我哈。非常感谢！
jQuery的学习
我们今天学习的内容是jQuery，在我的印象中JavaScript和jQuery是相通的，可以相互转换的。不过jQuery比JavaScript简单得多，写出来的代码也比JavaScript的少，看起来更好看一些，更整洁一些。那么我们开始学习吧！
目录
二．认清jQuery对象与JavaScript(js)对象的区别与转换。
三．讲解 css(),html(),text(),val().方法。
四.讲解 attr() removeAttr() 设置元素的属性
3.js中移除元素的方法 removeAttribute();
五.对class类的操作 addClass() removeClass() toggleClass() hasClass()；
一．认识JavaScript（js）与jQuery。
JavaScript(js)：
JavaScript是一门脚本语言。具体是什么，这里我就不多讲，后面我会有具体的讲解。但是在这里还是用到JavaScript的，有说明呢，不用怕^_^~
jQuery:
- 什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示： 除此之外，jQuery还提供了大量的插件
- 如何使用jQuery？
jQuery下载地址：https://jquery.com/download/
通过这个下载地址下载jQuery库，然后在我们的页面标签内中，通过<script>标签引入jQuery库即可；如下：
- jQuery的语法
jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作
基础语法：$(selector).action();
$美元符号定义jQuery
selector 选择符需要查找的元素 支持css1~css3中的主流选择器
action() 执行对元素的操作
例如：
$("p").hide();//隐藏所有 <p> 元素
二．认清jQuery对象与JavaScript(js)对象的区别与转换。
首先在<body>里面创建一个div和一组div,然后在div里加一个ID和一个class类。如上^o^！
然后在<script>里面获取元素，如下：
Console.log(); 控制台输出
输出之后，结果如下：
我们都知道jquery对象只能使用jQuery里面的方法，js对象只能使用js里面的方法与属性。如果js对象要使用jQuery里面的方法的话，我们就需要把js对象转换jQuery对象。那如果jQuery对象要使用js里面的方法的话，也需要我们把jQuery对象转换为js对象。那么具体我们往下看吧^.^
1.js对象==>jQuery对象： $(js对象);
//div是一个js对象，上边有哦，然后
$(div);//jQuery对象
//这样就已经是转换成功了
输出是这样的：
2.jQuery对象==>js对象：jQuery对象[索引]；
div1是一个jQuery对象
div1[0];//js对象
[ ]里面的就是div的索引，具体看有多少个div
//get(索引) 也是可以将jQuery转换为js对象，如下：
div1.get(0);//js对象
输出是这样的：
三．讲解 css(),html(),text(),val().方法。
1.css()方法的讲解
首先：
在body里面写一个div,p标签，input标签，如下：
<body>
<div id="box"> 这是一个div元素！</div>
<p id="par"></p>
<input type="text" name="name" value=" " />
<script src="~/Content/bootstrap-4.1.3-dist/js/jquery-3.2.1.min.js"></script>
</body>
然后：
在head里面加一个style,style里面写div的样式。
<head>
<meta name="viewport" content="width=device-width" />
<title>cssMethod</title>
<style>
div{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
页面输出是这样的：
现在我们需要在页面加载的时候，改变宽高 背景颜色 字体颜色 字体大小。
//先通过js的方式改变样式
window.onload = function () {//页面加载事件
var box = document.getElementById("box");
box.style.width = "300px";
box.style.height = "300px";
box.style.backgroundColor = "green";
box.style.color = "#fff";
box.style.fontSize = "30px";
}
//再通过jQuery的方式改变样式
$(document).ready(function(){//页面加载事件
$(“#box”).css(“width”,”300px”);//添加一个元素
$(“#box”).css({
width:”300px”,
height:”300px”,
backgroundColor:”green”;
color:”#fff”,
fontSize:”30px”
});//添加多个元素
jQuery的页面加载事件还有一个简写的形式
$(function(){
//简写形式
});
无论是js改变的样式还是jQuery改变的样式，实现的效果都是一样的，但是jQuery的代码比js的简便一点，不然"写的少，做的多"的说法是怎么来的，对吧^0^
css()方法不只是可以设置元素，它还可以获取元素：
$("#box").css(width);
这句代码是获取id为box的css样式width宽度；
2.html()方法的讲解
js方法：innerText() innerHTML()
var p = document.getElementById("par");
p.innerText = '<a href="#">这是一个p标签</a>';//只能加文本
p.innerHTML = '<a href="#">这是一个p标签</a>';
jQuery方法 html():
$("#par").html('<a href="#">这是一个p标签</a>');
html()方法获取：
var str = $("#par").html();
console.log(str);
var body = $("body").html();
console.log(body);
控制台输出：
3.text()方法的讲解
$("#par").text('<a href="#">这是一个p标签</a>');//显示出来的是文本，如下图
$("#par").text();//获取
4.val()方法的讲解
js方法获取input的值：
document.getElementsByTagName("input")[0].value;
jQuery方法设置值和获取值：
$("input").val("123");//设置值
$("input").val();//获取值
四.讲解 attr() removeAttr() 设置元素的属性
js:
首先先获取元素；
var box = document.getElementById("box");
1.js中添加元素的方法 setAttribute();
给box添加class属性与属性值
box.setAttribute("class", "wrapper");
2.js中获取元素的方法 getAttribute();
获取box元素的class属性值
var str = box.getAttribute("class");
console.log(str);
3.js中移除元素的方法 removeAttribute();
移除box元素的id属性
box.removeAttribute("id");
jQuery:
1.attr();
给box添加class属性与属性值
$("#box").attr("index", "123")
获取box元素的class属性值
var index = $("#box").attr("index");
console.log(index);
2.removeAttr ();
移除box元素的属性
$("#box").removeAttr("index");
attr()方法传一个值的时候就是获取，传两个值的时候就是添加；
五.对class类的操作 addClass() removeClass() toggleClass() hasClass()；
js中对类的操作：
获取元素：
var box = document.getElementById("box");
1.添加名为wrapper的class的类（两个方法）：
box.className = "wrapper";
box.classList.add("wrapper");
2.移除名为box的class的类：
box.classList.remove("box")；
jQuery中对类的操作：
1.addClass()：添加类
$("#box").addClass("wrapper");
2.removeClass()：移除类
$("#box").removeClass("box");
3.toggleClass() hasClass()
$("#btn").click(function () {
$("#box").toggleClass("wrapper");var bl = $("#box").hasClass("wrapper");
console.log(bl);
});
togger 转换
toggleClass() 判断元素是否含有这个类，如果有，它就会帮你移除，如果没有，它就会帮你添加，可以实现一个开关的功能。
hasClass()判断元素是否含有这个类，如果有，它就会返回一个true，如果没有，它就会返回一个false。
总结：
这一期我们学了什么是jQuery对象，什么是js对象，还有两者之间的转换。一共学了10个jQuery的方法，这些都是最基础的。
css(),设置或获取css样式。
html()，设置或获取html样式。
text()，设置或获取文本。
val()，设置或获取表单元素的值。
attr(),设置或获取属性和属性值。
removeAttr()，移除属性和属性值。
addClass()，设置或获取jQuery的class元素。
removeClass()，移除jQuery中的class元素。
toggleClass()，切换jQuery中class元素。
hasClass()，判断是否存在一个类，返回true或者false。
那么这一期就结束了，我们下一期见。拜拜^.^
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
