5.20
昨日回顾
JavaScript事件绑定
-
绑定事件的两种方式：获取元素，再绑定事件；在标签内绑定事件
-
一些案例
开关灯，获取、失去焦点，计时器，省市联动：onchange
jQUery
- 简介：内部封装了js代码并提供额外功，使用版本3.4.1
- 如何使用：下载到本地，引入；使用CDN
- bootcdn，前端相关的应用程序都有免费的cdn服务
jQuery基本语法结构
-
$().action()
-
选择器
-
基本选择器
$(‘#id’).action() $(‘.c1’).action() -
选择到的对象是jQuery对象，不能直接用js的方法
转成js对象：$(‘#d1’)[0]
转成jQuery对象：$(document.getElementById(‘d1’))
-
组合编组嵌套
$('div,span') //并列 $('div span') //后代 -
基本筛选器
针对jQuery数组再进行筛选，拿到jQuery数组的第几个 :first //拿第一个 :last :eq(index) //取索引位置的那个 :even :odd :lt(index) //小于index的都拿 :gt(index) :not :has -
属性选择器
$('[username]') $('[username="aaa"]') $('input[username="aaa"]') -
表单选择器
$('input[type=text]') //可以直接写成 $(':text') //只针对input，select有这些操作 特例 :checked
-
-
筛选器方法
.next() .nextAll() .nextUntil() //不包含最后一个 .prev() .prevAll() .parent() .parents() .parentsUntil() .children() //子 .siblings() //兄
今日内容
- jQuery操作标签
- jQuery绑定事件
- 补充知识点
- 动画效果
- bootstrap
练习题
-
找到本页面中id是
i1的标签$('#i1') -
找到本页面中所有的
h2标签$('h2') -
找到本页面中所有的
input标签$('input') -
找到本页面所有样式类中有
c1的标签$('.c1') -
找到本页面所有样式类中有
btn-default的标签$('.btn-default') -
找到本页面所有样式类中有
c1的标签和所有h2标签$('.c1,h2') -
找到本页面所有样式类中有
c1的标签和id是p3的标签$('.c1,#p3') -
找到本页面所有样式类中有
c1的标签和所有样式类中有btn的标签$('.c1,.btn') -
找到本页面中
form标签中的所有input标签$('form input') //$('form').find('input') -
找到本页面中被包裹在
label标签内的input标签$('lable input') -
找到本页面中紧挨在
label标签后面的input标签$('lable+input') -
找到本页面中id为
p2的标签后面所有和它同级的li标签$('#p2~li') -
找到id值为
f1的标签内部的第一个input标签$('#f1 input:first') -
找到id值为
my-checkbox的标签内部最后一个input标签$('#my-checkbox input:last') -
找到id值为
my-checkbox的标签内部没有被选中的那个input标签$('#my-checkbox input[checked!="checked"]') -
找到所有含有
input标签的label标签$('lable:has("input")')
操作标签
操作样式
操作类
-
js的版本
classList.add() classList.contains() classList.toggle() -
jQuery版本
addClass() //添加class removeClass() //删除class hasClass() //查看是否有class toggleClass() //有则删除，没有则添加
操作CSS
jQuery.css('属性','value')
例，两个p标签，第一个p标签变成红色，第二个标签变成绿色
<p>111</p>
<p>222</p>
$('p').first().css('color','red').next().css('color','green')
//链式操作，可以一行代码操作很多标签
//jQUery对象调用方法之后，返回的还是当前jQuery对象，可以继续调用jQuery方法
//python里面类 return self，也可以实现这种操作
位置操作
$('p').offset() //拿到当前标签定位的值，相对于当前窗口的位移
$('p').position() //相对父标签的偏移量
//掌握
$(window).scrollTop() //获取页面下拉的长度，距离顶部的距离
//括号内不加参数，获取
$(window).scrollTop(0) //加参数就是设置
操作尺寸
$('p').height() //获取p标签的内容的高度，不包括padding，margin
$('p').innerHeight() //内容+padding
$('p').innerWidth()
$('p').outerHeight() //内容+padding+border的高度
文本操作
js中使用innerText和innerHTML操作
jQuery使用text和html来操作，使用方法和js一模一样
$('#p1').text() //获取标签内文本
$('#p1').html() //获取标签内的所有，识别标签
$('#p1').text('123') //设置标签内文本
$('#p1').html('<h1>111</h1>') //设置标签内容，可以识别标签
获取input的值
获取输入框：.val() 方法
$('#d1').val() //获取d1的value，可以获取或着设置值
$('#d1').val('123')
获取文件：取索引变成js对象，再取文件
$('#d1')[0].files[0] //获取文件
//如果一个对象解决不了的方法，随时转成js对象
属性操作
JavaScript中用 getAttribute和 setAttribute
jQuery使用 attr(name,value)
//设置属性
attr(name,value)
//获取属性，只用一个参数
attr(name)
//删除属性
removeAttr(name)
命名jQuery对象
推荐使用$开头，约定俗成
$pEle.attr('class','c1') //给jQuery对象设置类
提供给选择按钮和下拉的方法
prop
$('#d1').prop('checked') //看d1是否被选择，返回true，false
$('#d1').prop('checked',true) //设置d1为被选中
总结
对于标签上有的能够看到的属性和自定义属性用attr，对于返回布尔值的，比如checkbox，select，用prop
文档处理
创建标签
js中使用createElement
//创建p标签
let $pEle = $('<p>')
$pEle.text('p标签')
$pEle.attr('id','d1') //添加id为d1
appendChild
把标签插入页面
事件
绑定事件的两种方法
//第一种
$('#d1').click(function(){
alert('123')
});
//第二种，功能更加强大，支持事件委托
$('#d1').on('click',function(){
alert('123')
});
克隆事件
this：指代当前被操作对象
$(this).clone() //克隆当前对象的html和css，不克隆事件
$(this).clone(true) //加true，克隆事件
例子
自定义模态框
//本质就是给标签移除或着添加上hidden属性
左侧三级菜单
//点击一个菜单，只显示当前菜单下的，其他的隐藏
//添加点击事件，给所有的元素加上hide属性
//给this移除hide
$(this).children().removeClass('hide')
扩展：用一行代码搞定操作
回到顶部
window对象事件scroll
$(window).scroll(function(){
if($(window).scrollTop()>300){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
自定义登陆校验
获取用户的输入，如果输入错误提示
//给按钮绑定事件，获取username和password的value
//校验value，如果为空
/$userName.next().text('输入不能为空')
input实时监控
input事件，每次input框的内容变了，就会触发input事件
<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>
hover事件
鼠标悬浮+鼠标移开，可以分开两个函数写，分别代表悬浮，离开