jQuery的基本使用
选择器
$('选择器')
<p>我是p标签</p>
<div class="div">
<p>我是div中的p</p>
<div>
<p>我是div下的div的p</p>
</div>
</div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
// 选择器
console.log($)
$('p').css('backgroundColor', 'red')
$('.div p').css('backgroundColor', 'skyblue')
// DOM转为jQuery对象
var p = document.querySelector('p');
var $p = $(p)
$p.css('backgroundColor', 'yellow')
console.log($p)
// 事件绑定
$('p').click(function() {
// this 表示触发事件的元素
$(this).css('backgroundColor', 'green')
})
</script>
内容操作
html('') html()改变内部的html 读取html
text('') text() 改变文本内容 读取文本内容
<div class="div1"></div>
<div class="div2"></div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
// 返回的还是jQuery对象，意味着支持链式编程
$('.div1').html('<a href="">你好</a>')
$('.div2').text('<a href="">你好</a>')
console.log($('.div1').html())
console.log($('.div1').text())
</script>
过滤方法
first()第一个元素
last()最后一个元素
eq(索引) 在遍历的时候获得指定索引的元素
<!-- 过滤方法 first() last() eq(索引) 返回的都是jQuery对象-->
<div class="box">
<button>-</button>
<span>0</span>
<button>+</button>
</div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
var span = $('.box>span')
var num = span.text()
// $('.box button:first-child')
$('.box button').first().click(function() {
console.log('减少')
if (num > 0) {
num--
span.text(num)
} else {
alert('到底了');
}
})
// $('.box button:last-child')
$('.box button').last().click(function() {
console.log('增加')
if (span.text() < 10) {
num++
span.text(num)
} else {
alert('到头了');
}
})
</script>
样式操作
css('属性名','属性值')给指定元素设置属性及属性值
css({}) 给指定元素设置样式 以对象的形式作为参数
css('属性名') 获取指定属性的值
<style>
p {
color: #333;
}
div {
width: 200px;
height: 200px;
margin-top: 20px;
border: 1px solid #000;
}
</style>
<h3>css方法</h3>
<p>css方法可以设置和获取元素样式</p>
<div class="box"></div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
// 设置样式
$('.box').css('backgroundColor', 'pink')
$('.box').css('border', '10px solid yellow')
// 用对象的形式设置
$('.box').css({
'width': 100,
'height': 100,
'backgroundColor': 'red'
})
// 获取样式属性值
let width = $('.box').css('width')
console.log(width)
</script>
属性操作
<a href="" self="123">百度</a>
<script src="./jquery-3.5.1.min.js"></script>
<script>
// 设置属性的值
$('a').attr('href', 'https:www.baidu.com')
// 获取指定属性的值
var hrefValue = $('a').attr('href')
console.log(hrefValue)
// 删除指定属性的值
$('a').removeAttr('self')
</script>
值的操作
<input type="text" class="text">
<script src="./jquery-3.5.1.min.js"></script>
<script>
$('.text').val('设置值');
let value = $('.text').val();
console.log('获得的值为:', value)
</script>
元素的查找
<!-- 元素查找
父元素 parent()
子元素 children() children('选择器')
兄弟元素 siblings() siblings('选择器')
后代元素 find('选择器')
返回的都是jQuery对象
-->
类名操作
<div class="box"></div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
// 默认是没有样式的,即使你添加了类名
let has = $('.box').hasClass();
console.log(has)
$('.box').addClass('bg')
// 移除所有的样式,如果不指定类名
$('.box').removeClass('bg')
$('.box').click(function() {
$(this).toggleClass('bg')
})
</script>
事件
事件的注册和移除
<!--
.事件名(function（）{}) 注册事件
on('事件名',function(){}) 注册事件
off('事件名')移除指定的事件
off()移除该元素的所有的事件
one('事件名',function(){})注册事件一次性事件 只能怪触发一次
-->
<input type="text" class="text">
<script>
$('.text').on('input', function() {
console.log($(this).val())
})
$('.text').off('input')
$('.text').one('input', function() {
alert($(this).val())
})
</script>
事件的触发
<!--
直接触发事件 .事件名()
.trigger('事件名') 可以触发所有的事件,包括自定义事件
定义自定义事件
.on('自定义事件',function(){})
-->
<input type="text" class="text">
<script>
$('.text').click(function() {
console.log('我被点击了')
})
// 触发事件
$('.text').click()
$('.text').on('my', function() {
console.log('自定义事件触发了')
})
$('.text').trigger('my');
window事件绑定
<script>
// 滚动事件 用jq的写法是 $(window).scroll(function(){})
window.onscroll = function() {}
// 点击事件 jq写法 $(window).click(){}
window.onclick = function() {}
</script>
