• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

HTLM Day07

理清DOM对象和 jQuery对象

数字正射影像图对象通过射流研究…获取的对象数字正射影像图对象能使用射流研究…固有的方法,但是不能使用框架里面的方法。

框架操作通过框架包装数字正射影像图对象后产生的对象框架对象是框架独有的

# 虽然框架对象是包装数字正射影像图对象后产生的,但是框架对象无法使用数字正射影像图对象的任何方法,

# 同理数字正射影像图对象也没不能使用框架里的方法

# 互相转换

'''

框架对象是一个数组对象用[0]转成数字正射影像图对象

对于一个数字正射影像图对象,只需要用$()把数字正射影像图对象包装起来,就可以获得一个框架对象了,方法为$(dom对象);

'''

1.jQuery对象转数字正射影像图对象

var $variable=jQuery对象

定义变量变量=DOM对象

$variable[0]#得到数字正射影像图对象可使用数字正射影像图操作

2.数字正射影像图对象转框架对象# $(dom对象)

var变量=文档。getelementbyid(' D1 ')# DOM对象

var $variable=$(variable)#得到框架对象可使用框架操作

jQuery操作标签

#类别操作(就是' class='操作里面的属性)

框架操作数字正射影像图操作

addClass()classList.add()

removeClass()classList.remove()

hasClass()classList.contains()

toggleClass()classList.toggle()

# 样式操作

$divEle.css('border ',' 5px纯黑)

'''

框架对象. css('属性名','属性值)

数字正射影像图对象。风格。属性名='属性值'

'''

# 位置操作

$(窗口)。scrollTop()获取左侧滚动条距离顶端的位移量

'''

实时监测距离

$(窗口)。scroll(function () {

如果($(窗口)。scrollTop() 600){

警报('超过600了架不住了)

}

})

'''

返回顶部案例!声明文档类型

html lang='en '

meta charset='UTF-8 '

标题标题/标题

风格

#d1 {

高度: 500像素

background:深蓝

}

#d2 {

高度: 500像素

背景:媒体

}

#d3 {

高度: 500像素

背景黄绿色

}

#d4 {

高度: 500像素

背景:深粉色

}

一个{

文本装饰:无;

}

#后端{

高度: 50px

宽度: 50px

背景:白色;

位置:固定;

底部: 100像素

右: 50px

可视性:隐藏;/*方法2可见度*/

/*显示:无;* 方法2显示*!*/

}

/*方法3*/。隐藏{

显示:无;

}

/stly

e> <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/
Link to comment
Share on other sites