目录
一.jq操作html属性
二.jq操作css样式
三.jq事件
四.jq动画
一.jq操作html属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq操作HTML属性</title>
<!-- jq两种引入方式-->
<!-- jq代码本质上就是js代码-->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">
</script>-->
<script src="jq.js"></script> //在bottcdn网站查找
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--<div class="box1">123</div>-->
<!--<div class="box1">123</div>-->
<!--<div id="box2">123</div>-->
<!--<input type="text" value="123"><br>-->
<!--<input type="text" value="456">-->
<div></div>
<script>
//jq获取元素，就是相当于js中的document.getElementxxx
//括号内，使用css选择器的语法来选择元素即可
//直接获取，得到的也是一个类似于列表的内容，因为class是可以重复的，也可以通过下标指定获取某一个
// console.log($('box1')[0]);//相当于Js中的document.getElementsByClassName('box1')
// console.log($('box2')[0]);
// var box1 = $('.box1')[0]
// console.log(box1)
//jq修改元素
//text相当于js中的innerText
//不需要通过下标取到某个具体的标签然后来调用，而且也不可以
//只有jQuery.fn.init这样的对象，才可以调用这个text方法
//虽然jq本质上就是js，但是jq的方法只能通过jq对象来调用，js对象只能调用js方法
//如果通过jq选择器选中元素，然后再用下标取值，那么得到的是一个js的对象，或者叫他element对象
//如果通过jq选择器获取的标签有多个那么直接调用text会将他们全部修改
//如果只改其中一个，那就必须通过jq的方法得到其中那个，然后再去修改
// var b1 = $('.box1')
// b1.text('456')
//eq里面就是下标
// b1.eq(0).text('456')
// console.log(b1.eq(0))
//html方法，和inner HTML对应
// b1.html('<h1>poi</h1>')
// b1.eq(0).html('<h1>poi</h1>')
//val方法 直接调用 就是获取value的属性值
//如果元素有多个 只得到第一个的值
// var ipt = $('input')
// console.log(ipt.val())
// console.log(ipt.eq(1).val())
//val也可以修改属性的value值 直接往括号中传值
// console.log(ipt.eq(1).val('qwe'))
//element对象和jq对象相互转换
//jq对象转换成element对象，直接通过下标取值，得到的就是一个element对象
//element对象转换成jq对象 将这个element对象放到$()中即可
// var b1 = $('#box2')[0]
// b1.innerText = '999'
// var b1 = document.getElementById('box2')
// var b2 = $(b1)
// b2.text('0000')
//jq修改属性
var b1 = $('div')
//给某一个jq对象，设置了两个add class属性 那么他不是第二个覆盖第一个，而是将两个里面的class的值拼在一起
// b1.addClass('box')//给这个元素添加一个class值，相当于js中的className
// b1.addClass('box1')
//attr方法 和js中的setAttribute方法是同样的效果，也是同样的参数，下一个覆盖上一个
// b1.attr('class','box1')
// b1.attr('class','box')
//toggleClass,如果有class值就删掉，如果没有那就添加
// b1.toggle('box')
// b1.toggle('box')
//删除属性
b1.attr('class','box')
b1.removeAttr('class')
</script>
</body>
</html>
二.jq操作css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq修改css样式</title>
<script src="jq.js"></script>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
#box2{
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div id="box">
<div style="width: 100px;height: 100px;background-color: green" id="box2"></div>
</div>
<script>
var box = $('#box')
//修改单个样式，第一个参数是样式名，第二个是修改后的样式值
// box.css('backgroundColor','blue')
//修改多个样式，传一个字典进去
// box.css({
// 'width':'50px',
// 'height':'50px'
// })
//获取当前元素的左上角坐标
console.log(box.offset())//使用浏览器窗口作为参照物
console.log($(box2).position()) //使用父元素作为参照物，前提是父元素有设置定位，不然还是根据浏览器来
</script>
</body>
</html>
三.jq事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq事件</title>
<script src="jq.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button>单击</button>
<button>双击</button>
<div></div>
<button class="btn1">添加事件</button>
<button class="btn2">删除事件</button>
<p>这是p标签</p>
<p>这是p标签</p>
<p>这是p标签</p>
<p>这是p标签</p>
<p>这是p标签</p>
<p>这是p标签</p>
<script>
//jq简单事件：单击双击 划入划出
// var obtn = $('button')
// obtn.eq(0).click(function () {
// console.log(1)
// })
// obtn.eq(1).dblclick(function () {
// console.log(2)
// })
// var div1 = $('div')
// div1.mouseenter(function () {
// console.log('hi')
// })
// div1.mouseleave(function () {
// console.log('bye')
// })
//hover 可以同时设置划入划出事件 第一个参数是划入事件 第二个参数是划出事件
// var div2 = $('div')
// div2.hover(function () {
// console.log('hi')
// },function () {
// console.log('bye')
// })
//如果给hover只传一个 代表划入划出都执行这一个
// var div2 = $('div')
// div2.hover(function () {
// console.log('hi')
// })
//添加和移除事件,on和off一般是某个事件的功能里才会用到
// $('.btn1').click(function () {
//on就是添加事件，第一个是要添加的事件，第二个是该事件要执行的函数
// $('p').on('click',function () {
//$(this)，先通过this获取element对象，再通过jq选择器转换为jq对象
// $(this).css('color','blue')
// })
// })
// $('.btn2').click(function () {
//移除p标签绑定的单击事件
// $('p').off('click')
// })
//一次添加多个事件 还是用on 只不过它的参数需要变成一个字典，字典的键值对 就是事件和功能的键值对
$('.btn1').click(function () {
$('div').on({
'mouseenter':function () {
$(this).css('backgroundColor','red')
},
'mouseleave':function () {
$(this).css('backgroundColor','blue')
}
})
})
</script>
</body>
</html>
四.jq动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq动画</title>
<script src="jq.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top:200px;
}
</style>
</head>
<body>
<div class="box"></div>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
<button class="btn3">变化</button>
<button class="btn4">暂停</button>
<button class="btn5">延迟</button>
<script>
$('.btn1').click(function () {
//hide:让某个元素瞬间消失
//如果要让他慢慢消失，就添加一个参数，这个参数是以毫秒为单位的时间
//hide的消失是从右下角到左上角逐渐变小并且逐渐变透明
// $('.box').hide(3000)
//slideUp的消失是从底部往上卷起
// $('.box').slideUp()
// $('.box').slideUp(3000)
//淡出，慢慢变透明，不改变大小
$('.box').fadeOut(2000)
})
$('.btn2').click(function () {
//将已经隐藏的元素显示出来 和hide相反
// $('.box').show()
//slideDown作用与slideUp相反
// $('.box').slideDown(2000)
//淡入
$('.box').fadeIn(2000)
})
//toggle：如果本身是隐藏的，那就显示；如果本身是显示的，那就隐藏。作用和hide，show一样
//slideToggle:同上 作用和slideDown slideUp一样
//fadeToggle:同上
//动画：让某个元素的css样式 逐渐变成你设置的样式 但是背景颜色设置无效
$('.btn3').click(function () {
$('.box').animate({
'width':'500px',
'height':'100px',
'top':'50px',
'left':'20px'
},2000)
})
//暂停动画：在动画变化的过程中，让他暂停变化
$('.btn4').click(function () {
$('.box').stop()
})
//延迟：点击之后，先等待xx秒，再开始变化，就是在调用animate之前先调用delay
$('.btn5').click(function () {
$('.box').delay(3000).animate({
'width':'500px',
'height':'100px',
'top':'50px',
'left':'20px'
},2000)
})
</script>
</body>
</html> 