Jquery的基本使用

1.Jquery的基础使用

(1)外链jquery：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

(2)vue项目中引入jquery：

npm install jquery

//main.js中
import $ from ‘jquery’
window.jQuery = $
window.$ = $

(3) 使用 $() 来获取元素

//html语句
<div id="name">张三</div>

//js获取元素
document.getElementNameById("name")
//jquery获取元素
$("#name").click=function(){}

(4) 使用$(document).ready(function(){}) 或 $(function(){})来代替window.οnlοad=function(){}

//window.οnlοad=function(){}
$(document).ready(function(){})
$(function(){})

---

2.使用jquery进行数组操作

使用jqery获取到的对象有多个的时候就会以对象的形式存储，如果要获取其中某个可以使用eq(index)

//html语句
<div class="name">张三1</div>
<div class="name">张三2</div>
<div class="name">张三3</div>

//获取第一个元素 张三1 index=0
$(".name").eq(0).click=function(){}

---

3.使用Jquery修改CSS

.css()
（1）单属性访问

jq对象.css('width')

（2）单属性修改

jq对象.css('width','100px')

（3）多属性修改

jq对象.css({'width':'100px','heigth':'100px'})

---

4.使用Jquery修改标签属性

一、使用 .attr()
（1）单属性访问

jq对象.attr('class')

（2）单属性修改

jq对象.attr('class','myClass')

（3）多属性修改

jq对象.attr({'class':'myClass','id':'myId'})

二、使用 .prop()
prop一般用于获取属性checked、selected等元素的自带属性

$("input").prop("checked")

---

5.使用Jquery来删除标签属性

.removeAttr()

jq对象.removeAttr('class')

---

6.针对class属性 单独封装的方法

.addClass()： 添加
.removeClass()： 删除
.hasClass()： 查找有无
.toggleClass()： 切换
使用详情见：jquery操作class

---

7.针对有value属性的对象 单独封装的方法

.val()
（1）无参查询

//html代码
<input type="text" name="" id="input" value="11111">

a=$("#input").val()
console.log(a)//1111

（2）有参修改

//html代码
<input type="text" name="" id="input" value="11111">

$("#input").val('123456')

input框变化：

---

8.使用Jquery修改标签内Html内容

//html部分
<div id="div" style="background-color: cornflowerblue;"></div>

//jquery部分
$("#div").html("<h1>你好</h1>")

div内html被修改：

---

9.使用Jquery修改标签内Text内容

//html部分
<div id="div" style="background-color: cornflowerblue;"></div>

//jquery部分
$("#div").text("<h1>你好</h1>")

div内text被修改：

---

10、补充：Jquery中prop和attr的区别

attr()返回被选元素的属性值—>后来而来的属性
prop()返回被选元素的属性和值—>本身就有的属性 例如value src href checked
例子一：

<img src="" alt="">
<button>获取图片的class属性</button>

$("button").click(function(){
//如果属性存在 返回属性值 不存在返回undefined
console.log($("img").attr("class"))
//如果属性存在 返回属性值 不存在返回''
console.log($("img").prop("class"))
})

例子二：

<input type="checkbox">
<button>获取复选框的选中状态</button>

$("button").click(function(){
//如果属性存在 返回checked不存在返回undefined
console.log($("input").attr("checked"))
//如果属性存在 返回true 不存在返回false
console.log($("input").prop("checked"))
})