jquery
每日测验
"""
今日考题
1.列举你所知道的PEP8 Python编码规范
2.求结果(易错题)
v1 = 1 or 3
v2 = 1 and 3
v3 = 0 and 2 and 1
v4 = 0 and 2 or 1
v5 = 0 and 2 or 1 or 4
v6 = 0 or Flase and 1
3.简述字符编码发展史，以及你所知道的字符编码，每个字符编码表的在表示字符内部位数区别
4.js代码书写位置有几种，什么是事件，js如何绑定事件
"""
昨日内容回顾
-
BOM与DOM操作
-
BOM操作
# window对象 window.innerHeight window.innerWidth window.open() # 新建窗口打开指定的页面 window.open(url,'','height,width,top,bottom') window.close() # 关闭当前窗口 # navigator对象 navigator.userAgent # 后面讲爬虫还会涉及 # history对象 window.history.forward() window.history.back() # location对象 window.location.href # 获取当前页面的url window.location.href = url # 跳转到指定的url window.loacation.reload() # 弹出框 alert() confirm() 获取到用户点击的确定还是取消 prompt() 获取到用户输入的内容 # 计时器相关 1. setTimeout() clearTimeout() 2. setInterval() clearInterval() -
DOM操作
""" DOM树的概念 DOM操作可以操作 HTML CSS 事件 既然要操作 那首先得学会如何查找标签 """ # 直接查找 document.getElementById('d1') # 直接获取到标签对象 document.getElementsByClassName('c1') # 数组 document.getElementsByTagName('div') # 数组 # 间接查找 parentElement children firstElementChild lastElementChild nextElementSibling previousElementSibling # 节点操作 1.创建img标签，赋值属性，添加到文档中 2.创建a标签，赋值属性和内部文本，添加到文档中 """ 1.创建标签 let pEle = document.createElement('p') 2.赋值属性 pEle.id = 'd1' pEle.setAttribute('username','jason') pEle.setAttribute('class','c1') 3.赋值内部文本 pEle.innerText = '我是p标签' 4.添加到其他标签内部 appendChild() ... insertBefore() ... setAttribute() get... remove... """ # innerText与InnerHTML # innerText只能获取标签内部的文本 设置文本的时候不识别HTML # InnerHTML文本和标签都获取 设置文本的时候识别HTML # 获取值操作 value inputEle = document.getElementById('i1') inputEle.value # 获取文件数据 inputEle.files # 数组 [文件对象,文件对象1...] inputEle.files[0] # class操作 classList classList.add() classList.remove() classList.contains() classList.toggle() # 有删无加 # css操作 只要想操作标签css先用style起手 pEle.style.color pEle.style.backgroudColor pEle.style.marginTop pEle.style.fontSize """ 会讲css中横杆或者下划线去掉 然后讲后面的单词变大写 font-size fontSize """ # 事件 """ 到达某个条件自动触发的动作 """ # 绑定事件的两种方式 <p onclick='func()'></p> <p id='d1'></p> <script> // 第一种 function func(){} // 第二种 pEle = document.getElementById('d1') pEle.onclick = function(){} </script> # js代码到底应该写在html页面的哪个位置 一般都是放在body内最下方 # onload 等待XXX加载/读取/渲染...完毕 XXX.onload 等待XXX好了
今日内容概要
-
原生JS事件结束
-
jQuery(封装了js的前端框架(模块))
很容易与我们学的DOM操作混淆
原生js事件绑定
我们直接写几个案例，看懂即可
-
开关灯案例
<div id="d1" class="c1 bg_red bg_green"></div> <button id="d2">变色</button> <script> let btnEle = document.getElementById('d2') let divEle = document.getElementById('d1') btnEle.onclick = function () { // 绑定点击事件 // 动态的修改div标签的类属性 divEle.classList.toggle('bg_red') } </script> -
input框获取焦点失去焦点案例
<input type="text" value="老板 去吗?" id="d1"> <script> let iEle = document.getElementById('d1') // 获取焦点事件 iEle.onfocus = function () { // 将input框内部值去除 iEle.value = '' // 点value就是获取 等号赋值就是设置 } // 失去焦点事件 iEle.onblur = function () { // 给input标签重写赋值 iEle.value = '没钱 不去!' } </script> -
实时展示当前时间
<input type="text" id="d1" style="display: block;height: 50px;width: 200px"> <button id="d2">开始</button> <button id="d3">结束</button> <script> // 先定义一个全局存储定时器的变量 let t = null let inputEle = document.getElementById('d1') let startBtnEle = document.getElementById('d2') let endBtnEle = document.getElementById('d3') // 1 访问页面之后 将访问的时间展示到input框中 // 2 动态展示当前时间 // 3 页面上加两个按钮 一个开始 一个结束 function showTime() { let currentTime = new Date(); inputEle.value = currentTime.toLocaleString() } startBtnEle.onclick = function () { // 限制定时器只能开一个 if(!t){ t = setInterval(showTime,1000) // 每点击一次就会开设一个定时器 而t只指代最后一个 } } endBtnEle.onclick = function () { clearInterval(t) // 还应该将t重置为空 t = null } </script> -
省市联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <select name="" id="d1"> <option value="" selected disabled>--请选择--</option> </select> <select name="" id="d2"></select> <script> let proEle = document.getElementById('d1') let cityEle = document.getElementById('d2') // 先模拟省市数据 data = { "河北": ["廊坊", "邯郸",'唐山'], "北京": ["朝阳区", "海淀区",'昌平区'], "山东": ["威海市", "烟台市",'临沂市'], '上海':['浦东新区','静安区','黄浦区'], '深圳':['南山区','宝安区','福田区'] }; // 选for循环获取省 for(let key in data){ // 将省信息做成一个个option标签 添加到第一个select框中 // 1 创建option标签 let opEle = document.createElement('option') // 2 设置文本 opEle.innerText = key // 3 设置value opEle.value = key // <option value="省">省</option> // 4 将创建好的option标签添加到第一个select中 proEle.appendChild(opEle) } // 文本域变化事件 change事件 proEle.onchange = function () { // 先获取到用户选择的省 let currentPro = proEle.value // 获取对应的市信息 let currentCityList = data[currentPro] // 清空市select中所有的option cityEle.innerHTML = '' // 自己加一个请选择 let ss = "<option disabled selected>请选择</option>" // let oppEle = document.createElement('option') // oppEle.innerText = '请选择' // oppEle.setAttribute('selected','selected') cityEle.innerHTML = ss // for循环所有的市 渲染到第二个select中 for (let i=0;i<currentCityList.length;i++){ let currentCity = currentCityList[i] // 1 创建option标签 let opEle = document.createElement('option') // 2 设置文本 opEle.innerText = currentCity // 3 设置value opEle.value = currentCity // <option value="省">省</option> // 4 将创建好的option标签添加到第一个select中 cityEle.appendChild(opEle) } } </script> </body> </html>
jQuery
"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端模块不叫模块 叫 “类库”
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情
复习
python导入模块发生了哪些事？
导入模块其实需要消耗资源
jQuery在使用的时候也需要导入
但是它的文件非常的小(几十KB) 基本不影响网络速度
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)
版本介绍
jQuery文件下载
压缩 容量更小
未压缩
"""
# jQuery在使用之前 一定要确保已经导入了
针对导入问题
# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
配置
编辑
file and code template
"""我不想下载jQuery文件 能不能使用呢？"""
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""你的计算机必须要有网络"""
# jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨 jQuery简写 $
jQuery() === $()
# jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
先学如何查找标签
基本选择器
// id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]
组合选择器/分组与嵌套
$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
$('#d1,.c1,p') # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
$('div span') # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span') # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span') # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span') # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
基本筛选器
$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:first') # 大儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:last') # 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:eq(2)') # 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:even') # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:odd') # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:gt(2)') # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:lt(2)') # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:not("#d1")') # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")') # 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]
属性选择器
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
表单筛选器
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password') # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(':checked') # 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected') # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked') # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]
筛选器方法
$('#d1').next() # 同级别下一个w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)$('#d1').nextAll()w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)$('#d1').nextUntil('.c1') # 不包括最后一个w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0) $('.c1').prev() # 上一个w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)$('.c1').prevAll()w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]$('.c1').prevUntil('#d2')w.fn.init(2) [span, span, prevObject: w.fn.init(1)] $('#d3').parent() # 第一级父标签w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)$('#d3').parent().parent()w.fn.init [div#d2, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent()w.fn.init [body, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent().parent()w.fn.init [html, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent().parent().parent()w.fn.init [document, prevObject: w.fn.init(1)]$('#d3').parent().parent().parent().parent().parent().parent()w.fn.init [prevObject: w.fn.init(1)]$('#d3').parents()w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]$('#d3').parentsUntil('body')w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)] $('#d2').children() # 儿子 $('#d2').siblings() # 同级别上下所有 $('div p')# 等价 $('div').find('p') # find从某个区域内筛选出想要的标签 """下述两两等价"""$('div span:first')w.fn.init [span, prevObject: w.fn.init(1)]$('div span').first()w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0) $('div span:last')w.fn.init [span, prevObject: w.fn.init(1)]$('div span').last() w.fn.init [span, prevObject: w.fn.init(3)]$('div span:not("#d3")')w.fn.init(2) [span, span, prevObject: w.fn.init(1)]$('div span').not('#d3')w.fn.init(2) [span, span, prevObject: w.fn.init(3)]
每日测验
"""
今日考题:
1.有一个列表[3,4,1,2,5,6,6,5,4,3,3]请写出一个函数，找出该列表中没有重复的数的总和
2.简述数据库表设计中一对一、一对多、多对多的应用场景,char与varchar的区别
3.js代码书写位置有几种，什么是事件，js如何绑定事件，常见的事件有哪些
4.什么是jQuery，它的基本语法是什么，jQuery导入方式有哪些分别有什么区别，
列举你所知道的jQuery选择器(针对表单筛选器是否有注意事项)
"""
昨日内容回顾
-
js事件
# js绑定事件的两种方式 # 自己独立的敲出来昨天的案例 """ 1.开关灯 pEle.classList.add() ... 2.input框获取、失去焦点 onfocus onblur 3.计时器 onclick js代码逻辑 4.省市联动 onchange文本域变化 就记忆一个select """ -
jQuery简介
""" 内部封装了并且提供了额外功能的模块、框架 类库 兼容多个浏览器 版本更新 1.X 2.X 3.X 宗旨 write less do more 如何导入jQuery 1.将文件下载到本地直接导入(压缩、未压缩) 好处在于没有网也可以正常使用 不好的地方在于需要重复书写，文件路径还要固定 (pycharm模块功能 自动添加固定的代码 配置 编辑 file and code template html py ) 2.CDN服务 CDN的概念:内容分发网络 参考网站:bootcdn 前端相关的应用程序都有免费的cdn服务 好处在于无需下载对应的文件，直接走网络请求使用 不好的地方在于必须要有网 基本语法结构 jQuery().action() === $().action() """ -
jQuery选择器
# 基本选择器 $('#d1') $('.c1') $('span') """ jQuery选择器拿到的都是jQuery对象(你可以看成是一个数组) 重点 jQuery对象和标签对象的区分 jQuery >>> 标签对象 $('#d1')[0] 标签对象 >>> jQuery $(document.getElementById('d1')) 不同的对象之间调用的方法是不一样的，不能混用 """ # 组合、分组、嵌套 $('div,span,p') $('#d1,.c1,div') $('div span') # 后代 $('div>span') # 儿子 $('div+span') # 毗邻 $('div~span') # 弟弟 # 基本筛选器 """ 针对已经得到的结果进行二次筛选 :first :last :eq(index) :even :odd :gt(index) :lt(index) :not :has 从后代元素中筛选 $('div:has(".c1")') """ # 属性选择器 $('[username]') $('[username="jason"]') $('input[username="jason"]') # 表单筛选器 $('input[type="text"]') $(':text') :text ... :file """ 特殊情况 $(':checked') 拿到默认选中的checkbox和option $('input:checked') 在书写表单筛选器的时候 如果前面可以加限制条件最好加一个 """ # 筛选器方法 .next() .nextAll() .nextUntil() # 不包含最后一个 .prev() .prevAll() .prevUntil() # 不包含最后一个 .parent() .parents() .parentsUntil() # 不包含最后一个 .children() # 儿子们 .siblings() # 兄弟 同级别上下所有 $('div p') === $('div').find('p') # 基本筛选器优化封装 .first() .last() .not() .has() .eq() """ 选择器无论你用哪个都可以 只要能够实现需求就行 """
今日内容概要
今天要把jQuery全部结束
- jQuery操作标签
- jQuery绑定事件
- jQuery补充知识点
- jQuery动画效果(了解)
- Bootstrap(前端框架)开头
今日内容详细
-
jQuery练习题
$('#i1') r.fn.init [div#i1.container] $('h2') r.fn.init [h2, prevObject: r.fn.init(1)] $('input') r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)] $('.c1') r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)] $('.btn-default') r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)] $('.c1,h2') r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)] $('.c1,#p3') r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)] $('.c1,.btn') r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)] $('form').find('input') r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)] $('label input') r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)] $('label+input') r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)] $('#p2~li') r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)] $('#f1 input:first') r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)] $('#my-checkbox input:last') r.fn.init [input, prevObject: r.fn.init(1)] $('#my-checkbox input[checked!="checked"]') r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0) $('label:has("input")') r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)] -
操作标签
# 操作类 """ js版本 jQuery版本 classList.add() addClass() classList.remove() removeClass() classList.contains() hasClass() classList.toggle() toggleClass() """ # css操作 <p>111</p> <p>222</p> """一行代码将第一个p标签变成红色第二个p标签变成绿色""" $('p').first().css('color','red').next().css('color','green') # jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签 # jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法 class MyClass(object): def func1(self): print('func1') return self def func2(self): print('func2') return self obj = MyClass() obj.func1().func2() # 位置操作 offset() # 相对于浏览器窗口 position() # 相对于父标签 scrollTop() # 需要了解 $(window).scrollTop() 0 $(window).scrollTop() 969 $(window).scrollTop() # 括号内不加参数就是获取 1733 $(window).scrollTop(0) # 加了参数就是设置 n.fn.init [Window] $(window).scrollTop(500) n.fn.init [Window] scrollLeft() # 尺寸 $('p').height() # 文本 20 $('p').width() 1670 $('p').innerHeight() # 文本+padding 26 $('p').innerWidth() 1674 $('p').outerHeight() # 文本+padding+border 26 $('p').outerWidth() 1674 # 文本操作 """ 操作标签内部文本 js jQuery innerText text() 括号内不加参数就是获取加了就是设置 innerHTML html() $('div').text() " 有些话听听就过去了，不要在意，都是成年人! " $('div').html() " <p> 有些话听听就过去了，不要在意，都是成年人! </p> " $('div').text('你们都是我的大宝贝') w.fn.init [div, prevObject: w.fn.init(1)] $('div').html('你个臭妹妹') w.fn.init [div, prevObject: w.fn.init(1)] $('div').text('<h1>你们都是我的大宝贝</h1>') w.fn.init [div, prevObject: w.fn.init(1)] $('div').html('<h1>你个臭妹妹</h1>') w.fn.init [div, prevObject: w.fn.init(1)] """ # 获取值操作 """ js jQuery .value .val() """ $('#d1').val() "sasdasdsadsadad" $('#d1').val('520快乐') # 括号内不加参数就是获取加了就是设置 w.fn.init [input#d1] $('#d2').val() "C:\fakepath\01_测试路由.png" $('#d2')[0].files[0] # 牢记两个对象之间的转换 File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …} # 属性操作 """ js中 jQuery setAttribute() attr(name,value) getAttribute() attr(name) removeAttribute() removeAttr(name) 在用变量存储对象的时候 js中推荐使用 XXXEle 标签对象 jQuery中推荐使用 $XXXEle jQuery对象 """ let $pEle = $('p') undefined $pEle.attr('id') "d1" $pEle.attr('class') undefined $pEle.attr('class','c1') w.fn.init [p#d1.c1, prevObject: w.fn.init(1)] $pEle.attr('id','id666') w.fn.init [p#id666.c1, prevObject: w.fn.init(1)] $pEle.attr('password','jason123') w.fn.init [p#id666.c1, prevObject: w.fn.init(1)] $pEle.removeAttr('password') w.fn.init [p#id666.c1, prevObject: w.fn.init(1)] """ 对于标签上有的能够看到的属性和自定义属性用attr 对于返回布尔值比如checkbox radio option是否被选中用prop """ $('#d3').attr('checked') "checked" $('#d2').attr('checked') undefined $('#d2').attr('checked') undefined $('#d4').attr('checked') undefined $('#d3').attr('checked') "checked" $('#d3').attr('checked','checked') # 无效 w.fn.init [input#d3] $('#d2').prop('checked') false $('#d2').prop('checked') true $('#d3').prop('checked',true) w.fn.init [input#d3] $('#d3').prop('checked',false) w.fn.init [input#d3] # 文档处理 """ js jQuery createElement('p') $('<p>') appendChild() append() """ let $pEle = $('<p>') $pEle.text('你好啊 草莓要不要来几个?') $pEle.attr('id','d1') $('#d1').append($pEle) # 内部尾部追加 $pEle.appendTo($('#d1')) $('#d1').prepend($pEle) # 内部头部追加 w.fn.init [div#d1] $pEle.prependTo($('#d1')) w.fn.init [p#d1, prevObject: w.fn.init(1)] $('#d2').after($pEle) # 放在某个标签后面 w.fn.init [p#d2] $pEle.insertAfter($('#d1')) $('#d1').before($pEle) w.fn.init [div#d1] $pEle.insertBefore($('#d2')) $('#d1').remove() # 将标签从DOM树中删除 w.fn.init [div#d1] $('#d1').empty() # 清空标签内部所有的内容 w.fn.init [div#d1]
事件
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
-
克隆事件
<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> -
自定义模态框
"""模态框内部本质就是给标签移除或者添加上hide属性""" -
左侧菜单
<script> $('.title').click(function () { // 先给所有的items加hide $('.items').addClass('hide') // 然后将被点击标签内部的hide移除 $(this).children().removeClass('hide') })</script><!--尝试用一行代码搞定上面的操作--> -
返回顶部
<script> $(window).scroll(function () { if($(window).scrollTop() > 300){ $('#d1').removeClass('hide') }else{ $('#d1').addClass('hide') } })</script> -
自定义登陆校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息<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>
今日作业
"""今日作业必做1.利用jQuery链式操作一句话完成菜单显隐展示2.整理日考题目3.整理今日内容完成博客书写选做1.预习前端框架Bootstrap"""
