前端之jQuery 前端之jQuery

前端之jQuery
目录

前端之jQuery
- 1. jQuery介绍
  - 1.1 jQuery版本
  - 1.2 jQuery导入
  - 1.3 jQuery基本语法
  - 1.4 jQuery中查找标签
    - 1.4.1 基本选择器
    - 1.4.2 组合选择器
    - 1.4.3 基本筛选器
    - 1.4.4 属性选择器
    - 1.4.5 表单筛选器
    - 1.4.6 筛选器方法
  - 1.5 操作标签
- 2. jQuery 事件
  - 2.1 绑定事件
  - 2.2 克隆事件
  - 2.３自定义模态框
  - 2.4 左侧菜单栏
  - 2.5 返回顶部
  - 2.6 自定义登录检验
  - 2.7 input框实时监控
  - 2.8 鼠标悬浮
  - 2.9 键盘按键事件
  - 2.10 阻止后续事件执行
  - 2.11 阻止事件冒泡
  - 2.12 事件委托
  - 2.13 页面加载
- 3. jQuery其他
  - 3.1 动画效果
  - 3.2 其他

1. jQuery介绍 jQuery 是一个 JavaScript 库。它封闭了原生的js代码，能够在书写更小的代码完成js操作。类似Python中的模块，但是在前端中叫类库。
它兼容多个浏览器。jQuery的宗旨:write less do more
jQuery官方网站
1.1 jQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

jQuery版本选择3.x的版本，下载时有里有压缩和不压缩之分，在生产环境使用压缩版本。
1.2 jQuery导入
jQuery需要导入才能使用

本地导入:网络导入免费jquery CDN网站:https://www.bootcdn.cn/jquery/

1.3 jQuery基本语法

jQuery(选择器).action() 这么写比较复杂 jQuery可以简写为$$(选择器).action()

原生js代码和jQuery代码对比

// jS代码: let pEle = document.getElementsByTagName('p')[0] pEle.style.color='green' // jQuery代码: jQuery('p').css('color','blue')

1.4 jQuery中查找标签
1.4.1 基本选择器

//html代码:春来江水绿如蓝 //jquery ID选择器 $('#d1') 类选择器 $(".c1") 标签选择器 $('span')//jquery取的值为jquery对象, 表现形式为数组。 jQuery对象变成标签对象: $('#d1')[0]//因为为数组可以切片取值标签对象转jquery对象：使用$()括号起来就行： $(document.getElementById('d1'))

1.4.2 组合选择器

//HTML代码 div div-->spandiv-->p div-->p-->span div-->span// jquery代码: $('div#d1') // 找id为d1的div标签 $('div.c1') // 找class为c1的div标签$('#d1,.c1,p') // 同一级别 id为d1的标签,class为c1的标签和p标签 $('div span')//后代$('div>span')//儿子 $('div+span') //毗邻 $('div~span') //弟弟这些选择器和CSS的一模一样。

1.4.3 基本筛选器

//HTML代码 100 101 102 103 104 105 106 107 108 109 //jquery:$('ul li:first') //第一个元素标签 $('ul li:last')//最后一个元素标签 $('ul li:eq(2)') //索引值是2的标签 $('ul li:even')//索引值是偶数的标签(包含0) $('ul li:odd')//索引值是奇数的标签 $('ul li:gt(2)') //索引值大于2的标签 $('ul li:lt(2)') //索引值小于2的标签$('ul li:not("#d1")') //取反，id不是d1的标签//HTMLdiv--p div not p //jquery: $('div:has("p")') //div里有p标签的 has包含有

1.4.4 属性选择器

//HTML //jQuery: $('[username]')//有username的标签$('[username="hi"]') //有username并且等于hi的标签$('p[username="hello"]') //username等于hello的p标签

1.4.5 表单筛选器

//HTML username password //jquery: $('input[type="text"]')//input标签里类型是text的 $('input[type="password"]')//input标签里类型是password的//上面的写的法有点复杂在表单筛选器中，可以简写 $(':text') $(':password')//还有一些简写： $(':file') $(':radio') $(':checkbox')//使用时它不仅会拿到checked也会把selected也能拿到，如果只想拿到checked则加一些条件限制一下$(input:checked) $(':submit') $(':reset') $(':button')上面的只可以在表单筛选器中使用

1.4.6 筛选器方法

span spandiv-->spandiv-->p div->p->span div-->spanspan span span// jQuery代码: $('#d1').next() //同级别下一个 $('#d1').nextAll() //同级下面的全部 $('#d1').nextUntil('.c1')//下面到class为c1为止(不包含c1) $('.c1').prev()//同级别上一个 $('.c1').prevAll() // 上面的全部 $('.c1').prevUntil('#d2') //上面到id 为d2的为止 $('#d3').parent() // 父标签$('#d3').parent().parent() // 父标签的父标签$('#d3').parents()//全部父标签(祖谱) $('#d3').parentUntil('body')// 查找父标签到body为止$('#d2').children()// 子标签 $('#d2').siblings()// 全部同级别(上下都包含)标签(兄弟标签)$('div').find('p') // find在某个区域内找P标签和$('div p')一样 $('div span').first() //div中第一个span标签 $('div span').last() //div中最后一个span标签 $('div span').not('#d3')// /div中全部不包含id为d3的span标签

1.5 操作标签
操作类

js版本	jQuery版本	含义
classList.add()	addClass()	增加
classList.remove()	removeClass()	删除类
classList.contains()	hasClass()	是否包含
classList.toggle()	toggleClass()	有删除，没有就添加

jQuery的链式操作

AAA BBB //一行代码把AAA变成红色，BBB变成蓝色 $('p').first().css('color','red').next().css('color','blue')jQuery操作css样式：.css() jQuery操作jQuery对象返回的还是jQuery对象那么还可以继续操作

获取当前标签的位置

$('p').offset()//获取标签在窗口中的偏移量 $('p').position() //获取标签针对父标签的偏移量 $(windows).scrolltop() //获取垂直滚动条位置 $(windows).scrolltop(500) //

尺寸

$('p').height() //文本的高度 $('p').width() //文本的宽度 $('p').innerHeight()// 文本+padding $('p').innerWidth() $('p').outerHeight() //文本+padding+border $('p').outerWidth()//

文本操作

js版本	jQuery版本	含义
innnerText()	text()	获取文本(不加载样式)，如果括号里面有值则为设置
innerHtml()	html()	获取文本(加载样式)，如果括号里面有值则为设置
.value	.val()	获取值，如果括号里有值则设置

示例:

//HTML AAA $('p').text() //获取文本 $('p').text("HHHH")//设置文本 $('p').text("AAAA") //原样输出 $('p').html()//获取文本 $('p').html("AAAA") //设置本(有样式)// 获取输入值： $('#d1').val() "asdf"// 获取上传的文件： $('#d1')[0].files[0]

属性操作

js版本	jQuery版本	含义
setAttribute()	attr(name,value)	设置属性
getAttribute()	attr(name)	获取属性
removeAttribute()	removeAttr(name)	删除属性

let $pEle=$('p') $pEle.attr('id') //获取id的属性 "d1" $pEle.attr('class') //获取class的属性$pEle.attr('class' ,'c1') //设置class的属性$pEle.removeAttr('class') //删除class的属性/* 对于标签上有的能够看到的属性和自定义属性用attr 对于返回布尔值的如:checkbox radio option是否被选中的用prop */$('#d2').prop('checked') //获取 $('#d2').prop('checked',true) //选中 $('#d2').prop('checked',false) // 取消选中

文档处理

createElement()$('') appendChild()append()//HTML:div-->spandiv-->p div->p->span div-->span//jquery代码: let $pEle=$('')//新创建一个p标签 $pEle.text("Hello World") //给这个P标签加文本 $pEle.attr('id','i1') //给这个P标签设置id为i1 $('#d2').append($pEle) //在id为d2的标签最后面加上这个p标签 $pEle.appendTo($('#d1')) //这个和上面的命令作用一样，把这个p标签加到id为d2的标签里面 $('#d2').prepend($pEle) //在头部追加 $pEle.prependTo($('#d1')) $('#d3').after($pEle) //在某个标签的后面 $pEle.afterTo($('#d3'))$('#d3').before($pEle) //在某个标签的前面 $pEle.beforeTo($('#d3'))$('#d2').remove() //从DOM树中删除标签(包含里面的全部标签) $('#d2').remove() //清空标签内部所有的内容

2. jQuery 事件 2.1 绑定事件

// 第二种绑定方法更强大，它还支持事件委托

2.2 克隆事件

Title - 锐客网#d1 { height: 100px; width: 100px; background-color: lightblue; border:1px solid red; } // this 指代的是当前被操作的标签对象 // clone 默认情况下只克隆html和css样式，不克隆事件。 // 就是克隆出来的对象点击时它是无法创建对象的。 // 如果要把事件也克隆出来则需要给clone()转个true参数//加上后克隆出来的对象点击时它就可以创建对象了。

2.３自定义模态框

Title - 锐客网body { margin: 0; } .cover { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; } .modal{ background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; padding-left: 10px; z-index: 100; } .hide { display: none; }最底层username: password:

2.4 左侧菜单栏

Title - 锐客网 -.left { float: left; background-color: darkgray; width: 20%; height: 100%; position: fixed; }.title{ font-size: 36px; color: white; text-align: center; } .items{ border: 1px solid black; } .hide{ display: none; }菜单一 111 222 333菜单二 111 222 333菜单三 111 222 333

2.5 返回顶部

Title - 锐客网.hide { /*border: 3px black solid; */ /*background-color: orange; */ /*position: relative; */ display: none; } #d1 { background-color: orange; position: fixed; border: 3px black solid; right: 20px; bottom: 20px; height: 50px; width: 50px; }回到顶部

2.6 自定义登录检验

//如果用户名或密码没有输入则提示 Title - 锐客网username: password:

2.7 input框实时监控

2.8 鼠标悬浮

测试悬浮 // hover是有两个事件组成，一个是鼠标悬浮一个是鼠标移开。 // 如果只写一个函数则两个事件都用这一个。如果写两个函数，则悬浮和移开使用不同的函数测试悬浮 //如果只想让它弹出来一次，则让第二个函数为空

2.9 键盘按键事件

// 监测在键盘上按下什么键

2.10 阻止后续事件执行

// 提交后显示这个hello，但是提交后hello闪而过，这就是因为它有后续事件阻止方法一: 方法二:

2.11 阻止事件冒泡

div div-->p div-->p-->span // 点击div-->p-->span 后上面的p和div也会弹出来(因为这三个标签是包含的，点了是里面的也会触发上面的)，不符合我们的预期。 //解决方法://方法二：

2.12 事件委托

//动态增加一个button标签: let butEle=$('

2.13 页面加载
【前端之jQuery】等待页面加载完毕后再执行代码

//之前的方法: window.onload = function(){ js代码 }// jQuery中等待页面加载完后再执行: //方法一: $(document).ready(function(){ js代码 })//方法二: $(function(){ js代码 })//方法三: 直接写在body内部最后面

3. jQuery其他 3.1 动画效果

文章图片 $('#d8').hide(5000) //5秒钟隐藏 $('#d8').show(5000) //5秒钟出现 $('#d8').slideUp(5000) //5秒钟以滑动方式隐藏(自下而上) $('#d8').slideDown(5000) // 5秒钟向下滑动 $('#d8').fadeOut(5000) //淡出可见 $('#d8').fadeIn(5000) //淡入已隐藏的元素 $('#d8').fadeTo(5000,0.4) //允许渐变为给定的不透明度（值介于 0 与 1 之间）

3.2 其他

// each $('div').each(function(index){console.log(index)}) //拿索引 $('div').each(function(index,obj){console.log(index,obj)})//拿索引和值$.each([1,2,3],function(index,obj{console.log(index,obj)})//data 能够让标签帮我们存储数据，并且数据用户看不到$('div').data('info','Hello World')//给所有div加一个info属性值是Hello World. //验证: $('div').first().data('info') Hello World //删除: $('div').first().removeData('info')