标签：变化 分组 for jquery操作 file ios 前端入门 表单 窗口
js事件
# js绑定事件的两种方式
?
# 自己独立的敲出来昨天的案例
"""
1.开关灯
pEle.classList.add()
...
2.input框获取、失去焦点
onfocus
onblur
3.计时器
onclick
js代码逻辑
4.省市联动
onchange文本域变化
就记忆一个select
"""
jQuery简介
"""
内部封装了并且提供了额外功能的模块、框架
类库
?
兼容多个浏览器
?
版本更新
1.X
2.X
3.X 目前用的最多,但是不支持IE9之前的版本
?
宗旨
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(前端框架)开头
$(‘#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>
标签：变化 分组 for jquery操作 file ios 前端入门 表单 窗口
原文地址：https://www.cnblogs.com/lucky-cat233/p/12925223.html
