jQuery入门终章

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

练习题

1. 找到本页面中id是i1的标签

   $('#i1')
   

2. 找到本页面中所有的h2标签

   $('h2')
   

3. 找到本页面中所有的input标签

   $('input')
   

4. 找到本页面所有样式类中有c1的标签

   $('.c1')
   

5. 找到本页面所有样式类中有btn-default的标签

   $('.btn-default')
   

6. 找到本页面所有样式类中有c1的标签和所有h2标签

   $('.c1,h2')
   

7. 找到本页面所有样式类中有c1的标签和id是p3的标签

   $('.c1,#p3')
   

8. 找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签

   $('.c1,.btn')
   

9. 找到本页面中form标签中的所有input标签

   $('form input')
   //$('form').find('input')
   

10. 找到本页面中被包裹在label标签内的input标签

    $('lable input')
    

11. 找到本页面中紧挨在label标签后面的input标签

    $('lable+input')
    

12. 找到本页面中id为p2的标签后面所有和它同级的li标签

    $('#p2~li')
    

13. 找到id值为f1的标签内部的第一个input标签

    $('#f1 input:first')
    

14. 找到id值为my-checkbox的标签内部最后一个input标签

    $('#my-checkbox input:last')
    

15. 找到id值为my-checkbox的标签内部没有被选中的那个input标签

    $('#my-checkbox input[checked!="checked"]')
    

16. 找到所有含有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事件

鼠标悬浮+鼠标移开，可以分开两个函数写，分别代表悬浮，离开

按键事件