HTML5教程

HTML day07

本文主要是介绍HTML day07，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTLM Day07

理清DOM对象和 jQuery对象

DOM对象		通过js获取的对象 DOM对象能使用js固有的方法，但是不能使用jQuery里面的方法。
jQuery操作 	通过jQuery包装DOM对象后产生的对象	jQuery对象是jQuery独有的
# 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，
# 同理 DOM对象也没不能使用 jQuery里的方法

# 互相转换
'''
	jQuery对象是一个数组对象 用[0]转成DOM对象
	对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);
'''
1.jQuery对象转DOM对象
    var $variable = jQuery对象
    var variable = DOM对象
    $variable[0]	# 得到DOM对象 可使用DOM操作
    
2.DOM对象转jQuery对象	# $(dom对象)
	var variable = document.getElementById('d1')	# DOM对象
    var $variable = $(variable)	# 得到jQuery对象 可使用jQuery操作

jQuery操作标签

# class操作（就是class="操作里面的属性"）									
 jQuery操作				DOM操作
addClass()				classList.add()
removeClass()				classList.remove()
hasClass()				classList.contains()
toggleClass()				classList.toggle()

# 样式操作
$divEle.css('border','5px solid black')
'''
	jQuery对象.css('属性名','属性值')
	DOM对象.style.属性名 = '属性值'
'''


# 位置操作
$(window).scrollTop()  获取左侧滚动条距离顶端的位移量
"""
实时监测距离
	$(window).scroll(function () {
        if($(window).scrollTop() > 600){
            alert('超过600了 架不住了')
        }
    })
"""
返回顶部案例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            height: 500px;
            background: deepskyblue;
        }
        #d2 {
            height: 500px;
            background: mediumpurple;
        }
        #d3 {
            height: 500px;
            background: greenyellow;
        }
        #d4 {
            height: 500px;
            background: deeppink;
        }
        a {
            text-decoration: none;
        }
        #backtop {
            height: 50px;
            width: 50px;
            background: white;
            position: fixed;
            bottom: 100px;
            right: 50px;
            visibility: hidden; /*方法2 visibility*/
            /*display: none;  !* 方法2 display*!*/
        }
        /*方法3*/
        .hide {
            display: none;
        }

    </style>
    <script src="jQuery3.6.js"></script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>

    <button id="backtop">回到顶部</button>   <!--方法1 2-->
<!--    <button id="backtop" class="hide">回到顶部</button> &lt;!&ndash;方法3&ndash;&gt;-->

    <script>

        // 方法1.jquery自带的show() hide() 显示隐藏标签
        // $('#backtop').hide()
        // $(window).scroll(function () {
        //     if ($(window).scrollTop() > 600) {
        //         $('#backtop').show()
        //     }
        //     else {
        //         $('#backtop').hide()
        //     }
        // })

        // 方法2.
        // 用visibility的visible\hidden 控制显示隐藏。 将visibility初始设为hidden;
        // 或用display的inline\none 控制显示隐藏。 将display初始设为none;
        $(window).scroll(function () {
            if ($(window).scrollTop() > 600) {
                $('#backtop').css("visibility","visible")
                // $('#backtop').css("display","inline")
            }
            else {
                $('#backtop').css("visibility","hidden")
                // $('#backtop').css("display","none")
            }
        })

        // 方法3.jquery操作标签  addClass() removeClass()  移除添加class hide
        // 初始要添加class hide
        // $(window).scroll(function () {
        //     if ($(window).scrollTop() > 600) {
        //         // $('#backtop').removeClass('hide')
        //
        //     }
        //     else {
        //         // $('#backtop').addClass('hide')
        //     }
        // })

        $("#backtop").on("click", function () {
            $(window).scrollTop(0);
        })



    </script>
</body>
</html>

文本值操作

jQuery								DOM
text()								innerText
html() 								innerHTML
val() 								value
转js对象							  files
'''不写值就是获取 写了就是设置'''

属性操作

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

'''
DOM对象.getAttribute('属性名')	        获取指定属性
DOM对象.setAttribute('属性名','属性值')	设置属性
DOM对象.removeAttribute('属性名')	移除指定属性
'''

"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
	prop('checked')		  	 结果是布尔值
	prop('checked',false)  	  动态设置
"""

文档处理

# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').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)}  # 移走触发
)

值监听事件

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

阻止后续事件

"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
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内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

动画效果

hide
show
slideUp
slideDown
fadeIn
fadeOut
animate

前端框架

# bootstrap框架
	内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可

# bootstrap版本
	推荐使用v3版本

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

布局容器

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

栅格系统

class = 'row'  默认开设一行均分12份
class = 'col-md-n'  指定需要几份(电脑屏幕)
	# 栅格参数可以做到响应式布局xs sm md lg...

如果一行十二份用不完 可以调整位置
	col-md-offset-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/
这篇关于HTML day07的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航