JQ---jQuery基础

一.jQuery简介

1.什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

二.jQuery的使用

1.搭建jQuery环境

去jquery官网下载jQuery.js文件，然后引入到项目中。（以下步骤）

点击下图位置进行下载即可。

然后在你所下载的东西中找到以下文档，大概位置在：node_modules-->jquery-->dist中，如下图所示。

将以上两个文件拖拽到项目中即可。

然后进行引用：

<script src="./js/jquery.js"><script>

 

然后在index.html中写入如下代码看是否引用成功：

<script>
        if ($ != undefined) {
            alert("jquery已经引入成功！")      //弹出框
            console.log("是的！")            //调试台
        }
</script>

 运行index.html，若出现如下画面即引入成功：

2.jQuery语法：

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

​ jQuery(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

3.jQuery选择器

主要用来获取元素对象

js获取对象	jq获取对象
document.getElementByld(); document.getElementsByTagName(); document.getElementsByClassName(); document.getElementsByName(); document.querySelector(); document.querySelectorAll();	$(" 选择器")或者 jquery("选择器")

4.jQuery属性操作

属性操作函数	说明
html()	设置或获取innerHTML属性的值
text()	设置或获取innerText属性的值
val()	设置或获取value属性的值
attr()	设置或获取某属性的值
removeAttr()	删除某属性
prop()	和attr()作用一样，但是主要针对可简写的属性
removeProp()	删除某属性
addClass()	设置元素claa属性的值
removeClass()	删除元素class属性的值

上述方法，如果括号中带有参数那么就表示 设置/修改属性

如果括号中不写参数：就表示获取数据

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

• hide()--隐藏 ===》display:none;
• show()--显示 ===》display:block/inline;

size()/length--长度

js	jQ
js对象.innerHTML	jq对象.html()
js对象.innerText	jq对象.text()
js对象.value	jq对象.val()
js对象.setAttribute("","");	jq对象.attr("","")
js对象.length	jq对象.size()/length
	jq对象.prop(" "," ")设置/获取，本身就有的属性