jQuery补充与bootstrap框架
作者：互联网
一、筛选器
<p></p>
<div id="d1">
<span></span>
<p>
<span id="d2"></span>
</p>
<span></span>
</div>
<p></p>
# 一上面的标签为例
# 同级别往下查找
$('#d1').next() # 同级别的下面查找一个 而上面标签与id为d1的同级别下面只有p标签就会找这个p标签
$('#d1').nextAll() # 就是同级别下面查找全部
$('#d1').nextUntil() # 就是在括号内填写指定条件 然后同级别往下查找所有的标签 直到遇到指定的条件标签
# 同级别往上查找
$('#d1').prev() # 同级别往上查找一个 而上面标签中与id为d1的同级别上面只有p标签 就会找到这个p标签
$('#d1').prevAll() # 查找全部
$('#d1').prevUntil() # 也是在括号内填写指定条件 然后同级别往上查找所有的标签 直到遇到指定的条件标签
# 查找父辈标签
$('#d2').parent() # 查找id为d2的标签的父辈标签 只找一个
$('#d2').parents() # 查找全部
$('#d2').parentsUntil() # 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
# 查找儿子和兄弟
$("#id").children(); # 儿子们
$("#id").siblings(); # 兄弟们
'''
链式操作
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
一个对象操作完毕之后还可以继续点击相同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象
'''
二、操作标签
jQuery操作 对比 JS操作
addClass() classList.add() # 添加指定的CSS类名
removeClass() classList.remove() # 移除指定的CSS类名
hasClass() classList.contains() # 判断样式存不存在
toggleClass() classList.toggle() # 切换CSS类名，如果有就移除，如果没有就添加
.css('样式名','样式值') style.样式名 = '样式值' # 自己通过jQuery或js操作添加css样式
# 位置操作
$(window).scrollTop() # 获取左侧滚动条距离顶端的位移量
text() innerText() # 获取text标签
html() innerHTML() # 获取html标签
val() value # 获取标签的值
[0].files files # 获取文件值
# 没写就是获取 写了就是赋值
'''文档处理'''
# 内部添加
$(A).append(B) # 把B追加到A
$(B).preappend(B) # 把B前置到A
# 外部添加
$(A).after(B) # 把B放到A的后面
$(A).berfore(B) # 把B放到A的前面
# 清空内容
$('body').empty()
'''属性操作'''
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除
"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
建议使用 prop('checked') 结果是布尔值
prop('checked',false) 动态设置
"""
三、jQuery绑定事件
# js绑定事件的操作:
标签对象.on事件名 = function(){事件代码}
btnELe.onclick = function(){alert(123)}
# jQuery绑定事件的两种方式
# 方式1:
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function(){事件代码})
# 方式2:
jQuery对象.on('事件名',function(){事件代码})
$btnEle.on('click',function(){alert(123)})
"""
有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
"""
# 克隆操作
<button id="d1">是兄弟就来砍我</button>
<script>
$('#d1').click(function (){
# $('body').append($(this).clone()) 只是把标签和内容给克隆了 但是克隆操作没有被克隆过去被克隆的标签不能克隆
$('body').append($(this).clone(true)) # 只有在括号内加true 被克隆的标签才能克隆
}) # 克隆事件
</script>
四、阻止后续事件
# 能够触发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>
# 当我们按下这个两个标签的时候页面会刷新 然后把用户输入的信息提交到后端 并把输入框中的信息删除
'''
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
'''
eg：
<form action="">
<p>username:<input type="text" name="username"></p>
<input type="submit" value="提交"><button>按我</button>
<script>
$(':submit').click(function (){
alert('123')
})
</script>
</form>
'''上面的代码就是我们给按钮绑定了事件只要用户点击按钮就会弹出一个警告框 然后因为这个按钮本身就有默认事件 所以会先执行弹出警告框 然后在提交信息到后端'''
'''我们也可以让标签之前的事件不执行
两种方法'''
# 方式1:
$('#d1').click(function (){
alert(123)
return false # 取消当前标签对象后续事件的执行
})
# 在当前事件后续加 return false
# 方式2：
$('#d1').click(function (e){ # 加个参数e
alert(123)
e.preventDefault() # 写上这个方法即可
})
五、事件冒泡
# 当多个标签出现嵌套的情况 有可能会出现事件冒泡情况
<div id="d3">我是div标签
<p id="d2">我是p标签
<span id="d1">我是span标签</span>
</p>
</div>
<script>
$('#d1').click(function (){
alert('span')
})
$('#d2').click(function (){
alert('p')
})
$('#d3').click(function (){
alert('div')
})
</script>
'''就比如上面代码三个标签是嵌套关系 但是三个标签都有事件绑定 如果是先执行span标签 那么span执行完之后就会向p标签反馈如果p标签也有事件绑定就会执行事件然后再向div反馈如果div也有事件绑定就会执行事件直到没有事件为止
如果div有事件绑定 那么span事件执行完之后p标签没有事件就会到div标签执行'''
# 但是我们有时候只需要执行span标签不需要执行它的父辈标签的事件 有两种方法可以做到
# 方式1 return false
$('#d1').click(function (){
alert('span')
return false # 在事件后面加上return false即可
})
$('#d2').click(function (){
alert('p')
return false
})
$('#d3').click(function (){
alert('div')
})
# 当事件执行完如果遇到return false 就不会向上级反馈
# 方式2 e.stopPropagation()
$('#d1').click(function (){
alert('span')
})
$('#d2').click(function (e){
alert('p')
e.stopPropagation() # 用上这个方法即可
})
$('#d3').click(function (){
alert('div')
})
# 给函数传参 会自带方法
六、事件委托
# 当我们提前写好一个事件之后 针对动态创建的标签那么 事件是不会对这个标签生效的
'''
创建标签的两种方式
JS
document.createElement()
jQuery
$('<标签名>')
'''
# 事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
alert('123')
})
#上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)
# 这个时候不过你是提前写好的标签 还是后续动态创建的标签都可以执行这个事件
七、动画效果
# 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) # 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) # 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) # 自定义） animate(p,[s],[e],[fn])
八、bootstrap框架
# 1.bootstrap框架是提前写好了很多标签样式 我们只需要cv即可
# 2.我们要先导入才使用
1.可以本地导入
2.可以使用CDN服务
# 因为bootstrap需要使用jQuery服务 所以jQuery也一定要导入
# 第一次使用的时候一定要先本地导入到pycharm 这个时候写关键字的时候才会有提示
# 3.使用
我们在使用bootstarp的时候只需要在标签中写class属性 然后在class标签中写关键字即可
# 4.布局操作
class = 'container' # 两边有留白
class = 'container-fluid ' # 两边没有留白
# 5.栅格系统
class = 'row' # 默认开设一行然后均分12分
class = 'col-md-n' # 指定该标签需要n分
# 在一行不要超过12分
# 栅格系统还可以做响应式布局.col-xs- .col-sm- .col-md- .col-lg- 就是根据页面的大小展示最优的画面
组件中的图标还可以去 http://www.fontawesome.com.cn/ 这个网址
标签：jQuery,function,框架,标签,bootstrap,alert,事件,click,d1 来源： https://www.cnblogs.com/stephenwzh/p/16636948.html