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"))
})