8、jQuery（二）
一、操作标签
1、样式操作
// class操作
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
// 案例
$("p").addClass('c1') // 给p标签添加一个class名c1
$("p").removeClass('c1') // 删除p标签添的类名c1
$("p").hasClass('p1'); // 判断p标签也没有p1这个类名
//////////////////////////////////分割线//////////////////////////////////
// css操作
$("p").css("color", "red"); // 将所有p标签的字体设置为红色
2、位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移(需要掌握)
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
// 案例
$(window).scrollTop() // 可以查看滚动条距离页面顶部的距离
3、尺寸
height() // 查看元素的高度
width() // 查看元素的宽度
innerHeight() // 文本高度＋padding
innerWidth() // 文本宽度＋padding
outerHeight()
outerWidth()
4、文本操作
// HTML代码：
html() // 取得第一个匹配元素的html内容
html(val) // 设置所有匹配元素的html内容
// 文本值：
text() // 取得所有匹配元素的内容
text(val) // 设置所有匹配元素的内容
// 值：可以用来获取输入框里用户输入的数据
val() // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2]) // 设置多选的checkbox、多选select的值
//////////////////////////////////分割线//////////////////////////////////
// 案例
$('div').text() // 拿到div标签的文本
$('div').text('哈哈哈') // 设置div标签的文本内容为'哈哈哈'
$('div').html() // 拿到div的html内容
5、属性操作
attr(attrName) // 返回第一个匹配元素的属性值
attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr() // 从每一个匹配的元素中删除一个属性
// 案例
$('div').attr('class') // 获取第一个div标签的class名
$('div').attr('class','A1') // 将所有div标签的class名改成A1
$('div').attr({'class': 'v1', 'id':'v2'}) // 设置div标签的clas和id属性
$('div').removeAttr('class') // 删除div标签的class属性
'''针对checkbox、radio、option是否被选中用prop'''
$('#d2').prop('checked')
false
6、文档处理
$('<span>') // 创建标签
// 添加到指定元素内部的后面
$(A).append(B) // 把B添加到A里(放在最后)
$(A).appendTo(B) // 把A添加到B里
// 添加到指定元素内部的前面
$(A).prepend(B) // 把B放在A的头部(前置)
$(A).prependTo(B) // 把A放在B的头部(前置)
// 添加到指定元素外部的后面
$(A).after(B) // 把B放到A的尾部
$(A).insertAfter(B) // 把A放到B的后面
// 添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面
$(A).insertBefore(B) // 把A放到B的前面
// 移除和清空元素
remove() // 从DOM中删除所有匹配的元素。
empty() // 删除匹配的元素集合中所有的子节点(内容)。
//////////////////////////////////分割线//////////////////////////////////
// 案例
let $spanEle = $('<span>') // 创建标签，并赋值给一个变量名
$spanEle.text('哥们,这瓜多少钱一斤呐') // 设置标签的文本内容
$spanEle.text() // 查看标签的文本内容
// 结果："哥们,这瓜多少钱一斤呐"
$('div').append($spanEle) // 把$spanEle(上面的span标签以及文本内容)放在div标签里
$('#d1').append($pEle) // 内部尾部追加
$('#d1').append($pEle[0]) // 内部尾部追加
7、事件
<button id="d1">嘎嘎乱杀</button>
<button id="d2">有手就行</button>
<script>
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
// 比起JS代码绑定事件的代码更加简洁
</script>
8、克隆事件
点击按钮，在页面上克隆出一份
<button id="d1">屠龙宝刀，点击就送</button>
<script>
$('#d1').on('click',function () {
// console.log(this) // this指代是当前被操作的标签对象
// $(this).clone().insertAfter($('body')) // clone默认情况下只克隆html和css 不克隆事件
$(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件
})
</script>
9、模态框
10、左侧菜单
// 点击某个菜单会只显示菜单里的内容
<script>
$('.title').click(function () {
// 先给所有的items加hide
$('.items').addClass('hide')
// 然后将被点击标签内部的hide移除
$(this).children().removeClass('hide')
})
</script>
11、返回顶部
// 当页面下滑到指定距离会跳出 返回顶部的按钮
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
</script>
12、自定义登陆校验
// 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
let $userName = $('#username')
let $passWord = $('#password')
$('#d1').click(function () {
// 获取用户输入的用户名和密码 做校验
let userName = $userName.val()
let passWord = $passWord.val()
if (!userName){
$userName.next().text("用户名不能为空")
}
if (!passWord){
$passWord.next().text('密码不能为空')
}
})
$('input').focus(function () {
$(this).next().text('')
})
</script>
input实时监控
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>
hover事件
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>
键盘按键按下事件
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
阻止后续事件执行
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// 阻止标签后续事件的执行 方式1
// return false
// 阻止标签后续事件的执行 方式2
// e.preventDefault()
})
</script>
阻止事件冒泡
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
事件委托
<button>是兄弟，就来砍我!!!</button>
<script>
// 给页面上所有的button标签绑定点击事件
// $('button').click(function () { // 无法影响到动态创建的标签
// alert(123)
// })
// 事件委托
$('body').on('click','button',function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})
</script>
页面加载
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果
$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]
补充
# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9
$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>
# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"
浙公网安备 33010602011771号