jQuery操作标签 前端框架

day 44

 

 

查找标签绑定的变量名

原生js代码查找标签绑定的变量名推荐使用  xxxEle
jQuery代码查找标签绑定的变量名推荐使用 $xxxEle

 

jQuery操作标签

样式操作

样式类

jQuery操作

addClass();  # 添加指定的CSS类名。
removeClass();  # 移除指定的CSS类名。
hasClass();  # 判断样式存不存在
toggleClass();  # 切换CSS类名，如果有就移除，如果没有就添加。

对应DOM操作

classList.add()
classList.remove()
classList.contains()
classList.toggle()

css样式操作　

jQuery对象.css('属性名','属性值')
$divEle.css('border','5px solid black')  

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移


$(window).scrollTop()  获取左侧滚动条距离顶端的位移量

"""
实时监测距离
	$(window).scroll(function () {
        if($(window).scrollTop() > 600){
            alert('超过600了 架不住了')
        }
    })
"""

 

文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

 jQuery                                                         对应 DOM

text()					innerText
html() 					innerHTML
val() 					value
转js对象				        files

 

属性操作

获取标签的属性

$('div').attr('style')  # 直接获取第一个标签的style属性值 （默认获取单个）
$('div').attr('class','c1')  # 批量设置单个
$('div').attr({'name':'jason','pwd':123})  # 批量设置多个
$('div').removeAttr('class')  # 批量移除

获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr() 因为不够精确

建议使用
prop()  // 获取属性
removeProp()  // 移除属性


prop('checked')		结果是布尔值
prop('checked',false)  动态设置

 

文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

 

事件操作

'''js绑定'''
	标签对象.onclick = function(){}
  标签对象.onchange = function(){}
  ...
'''jQuery绑定'''
	jQuery对象.click(function(){})
  jQuery对象.change(function(){})

克隆操作  只有第一个是真身

<button id="d1">是兄弟就来砍我!!!</button>
  <script>
        $('#d1').click(function () {
        // $('body').append($(this).clone())  // 不克隆事件
        $('body').append($(this).clone(true))  // 克隆事件
        })
  </script>

 

悬浮事件 

记得加逗号 

$('#d1').hover(function () {alert(123)})
鼠标悬浮上去和移开各自触发一次

如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
  function () {alert(123)},  # 悬浮触发
	function () {alert(123)}  # 移走触发
)

值监听事件（实时监听）

<input type="text" id="d1">
<script>
    $('#d1').on('input',function () {
        console.log($(this).val())
    })
</script>

jQuery绑定事件有两种方式

	$('#d1').click(function(){})
	$('#d1').on('click',function(){})
有时候第一种绑定事件的方式无法生效 那么就使用第二种

 阻止后续事件

  如果给已经有事件的标签绑定事件 那么会依次执行
  如果想要取消后续时间的执行 可以使用两种方式阻止

1.方式1(推荐使用)
	$('#d1').click(function () {
     alert(123)
     return false  //  取消当前标签对象后续事件的执行
    })
2.方式2(自带关键字)
	$('#d1').click(function (e) {
            alert(123)
            e.preventDefault()
    })

事件冒泡

在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象

阻止冒泡两种方式：

方式1
	return false
方式2
	e.stopPropagation()

事件委托

针对动态创建的标签 提前写好的事件默认是无法生效的

如何生效呢 

$('body').on('事件类型','选择器',function(){})
$('body').on('click','button',function(){})  # 将body内所有的点击事件交给button标签处理

动画效果

// 基本
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框架
	内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可

# bootstrap版本
	推荐使用v3版本

# 基本使用
	必须先导入后使用
  	1.本地导入
    2.cdn导入
    	bootcdn
 	bootstrap需要使用jQuery来实现动态效果
 
# 文件组成
	bootstrap需要导入两个文件
  	一个是css文件
    一个是js文件
  
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""

布局容器

class = 'container'  		页面两边有留白
class = 'container-fluid'		页面两边没有留白

栅格系统

class = 'row'  默认开设一行均分12份 只能12份 不然会换行
class = 'col-md-n'  指定需要几份(电脑屏幕)
	# 栅格参数可以做到响应式布局xs(超小屏幕手机) sm(小屏幕平板) md(中等屏幕 桌面显示器) lg(大桌面显示器)...

如果一行十二份用不完 可以调整位置
	col-md-offset-3  # 偏移3份

 

表格样式

参考官网即可 有样式有源码 拷贝使用即可

# 表格样式
class="table table-hover table-striped table-bordered"
# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"

表单样式

.pull-left			左浮
.pull-right			右浮

class='form-control'  默认所在区域最大
针对radio和checkbox不能加!!!  因为特别显示出来特别丑

按钮与图片

# 按钮样式
class = 'btn'
# 按钮颜色
<a href="" class="btn btn-info">文本内容</a>
<a href="" class="btn btn-danger">文本内容</a>
<a href="" class="btn btn-warning">文本内容</a>
<a href="" class="btn btn-primary">文本内容</a>
<a href="" class="btn btn-success">文本内容</a>
# 按钮尺寸
<a href="" class="btn btn-success btn-sm">文本内容</a>
<a href="" class="btn btn-success btn-lg">文本内容</a>
<a href="" class="btn btn-success btn-block">文本内容</a>

图标样式

<span class="glyphicon glyphicon-user"></span>

# 更多图标
http://www.fontawesome.com.cn/