Day44

今日总结

jQuery操作标签

class操作、样式操作、位置操作

# class操作
	addClass()	# 添加类属性
    removeClass()	# 移除类属性
    hasClass()	# 判断是否含有某个类属性
    toggleClass()	# 有则移除 无则添加
    
# 样式操作
	$divEle.css('border','5px solid black')
    
# 位置操作
	$(window).scrollTop()	# 获取左侧滚动条距离顶端的位移量

文本操作

jQuery
text()	# 节点内部的内容（包括html标签）
html()	# 节点内部的内容（不包括html标签）
val()	# 获取标签的value值
# 获取文件数据
    1)js：fileEle.files[0]	#  添加索引[0]才会获取文件数据
    2)jQuery：$('标签')[0].files[0]	# 转换标签对象再索取
'''不写值就是获取 写了就是设置'''

属性操作

attr()          # 获取属性
attr(x,x)    # 设置、更改属性
removeAttr()    # 移除属性

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

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

文档操作

# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').empty()	# 清除body中的内容

事件操作

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

(鼠标)悬浮事件

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

# 悬浮和移开分开执行不同的操作
$('#d1').hover(
  function () {alert(123)},  # 悬浮触发
	function () {alert(123)}  # 移走触发
)

# 克隆事件
	<button id="d1">克隆事件</button>
    <script>
        $('#d1').click(function () {
            $('body').append($(this).clone(true))  // 克隆事件
        })
    </script>

值监听事件

jQuery绑定事件有两种方式
# 方式1
	$('#d1').click(function(){})
	$('#d1').on('click',function(){})
   
# 方式2
	<input type="text" id="d1">
    <script>
        $('#d1').on('input',function () {
            console.log($(this).val())
        })
    </script>
# 有时候第一种绑定事件的方式失效 可以使用第二种

阻止后续事件

# 如果给已经有事件的标签绑定事件 那么会依次执行,阻止后续事件可以取消后续事件的执行 
# 方式1
	$('#d1').click(function () {
     alert(123)
     return false  //  取消当前标签对象后续事件的执行
    })	# 推荐使用

# 方式2(关键字)
	$('#d1').click(function (e) {
            alert(123)
            e.preventDefault()
    })

事件冒泡

# 在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
# 方式1
	return false
# 方式2
	e.stopPropagation()

事件委托

# 针对动态创建的标签 提前写好的事件默认是无法生效的
$('body').on('事件类型','选择器',function(){})

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

动画效果

前段框架

# bootstrap框架
	bootstrap框架内部提供了很多标签样式和功能 我们只需要ctrl + C/V使用即可

# bootstrap版本
	推荐使用v3版本

# 基本使用
	必须先导入后使用
  	1.本地导入
    2.cdn导入
    	bootcdn
 	bootstrap需要使用jQuery来实现动态效果
 
# 文件组成
	bootstrap需要导入两个文件,一个是css文件,一个是js文件
    
# 官网
	https://getbootstrap.com/
        
# 使用案例
	# 栅格系统
   		class = 'row'  默认开设一行均分12份
		class = 'col-md-n'  均分n份
        
    # 表单样式(针对radio和checkbox不能加)
    	class='form-control'
    	.pull-left			左浮
    	.pull-right			右浮

	# 图标样式
    	<i class="fa fa-address-book" aria-hidden="true"></i>
        # 图标库网址
        	http://www.fontawesome.com.cn/

前端虽然不算太难，也不能掉以轻心啊