• 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

jQuery基础(二)

JQuery操作标签

jQuery的文本值操作

jQuery的属性操作

jQuery的文档处理

jQuery的事件操作

jQuery的浮动事件

JQuery值监听事件

防止后续事件

jQuery的事件正在冒泡。

jQuery的事件委托

jQuery的动画效果

JQuery前端框架

布局容器

网格系统

表格样式

表单样式

按钮和图片

图标样式

解释作业

jQuery操作标签

''它在语法上肯定比js简单'''

#类操作

#jQuery操作DOM操作

addClass()classList.add()

removeClass()classList.remove()

hasClass()classList.contains()

toggleClass()classList.toggle()

#风格操作

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

#位置操作

$(窗口)。scrollTop()从顶部获取右边滚动条的位移。当超过设定值时,会有一个弹出窗口。

'''

实时监控距离

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

if($(窗口)。scrollTop() 600){

Alert('已经600多了,受不了了')

}

})

'''

jQuery之文本操作

# jQueryDOM

text()内部文本

html() innerHTML

val()值

转js目标文件

#在这两种情况下,如果不写值,就会得到;写了就要设置。

jQuery之属性操作

$('div ')。attr('style') #获取第一个标记的样式属性值

$('div ')。attr('class ',' c1') #批量设置单个

$ ('div ')。attr ({'name' :' Jason ',' pwd' 3360123}) #批量设置多个

$('div ')。removeAttr('class') #批量移除

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

prop('checked ')的结果是一个布尔值。

Prop('checked ',false)可以动态调整复选框的选项。

jQuery之文档处理

#内部添加

$(一)。append(B)//将B追加到a。

$(一)。前置(B)//将B前置到a。

#外部添加

$(一)。在(B)之后//将B放在a之后。

$(一)。在(B)之前//把B放在a的前面。

#空内容

$('body ')。空()

jQuery之事件操作

' ' js绑定'''

对象。onclick=function(){}

对象。onchange=function(){}

.

' ' jQuery绑定'''

JQuery对象。单击(function(){})

JQuery对象。change(函数(){})

.

#克隆操作

Button id='d1 '如果你是兄弟,放我下来!/按钮

脚本

$('#d1 ')。单击(函数(){

//$ ('body ')。追加($(这个)。clone())//不克隆事件

$('body ')。追加($(这个)。克隆(

true)) // 克隆事件 }) </script>

jQuery之悬浮事件

$('#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/

前端框架几乎都是直接看官网拷贝样式就可以

作业讲解

1.js的dom操作编写一个页面计时器功能
页面上有一个输入框 两个按钮
2.点击开始按钮 输入框中自动展示时间(随秒数变化)
点击结束按钮 时间停止
'''
3.测验:连续点击开始 再点击结束 是否还是上述的效果
如果不是 思考问题所在 代码如何修改!!!

<body>
    <input type="text" id="d1">
    <button id="d2">开始</button>
    <button id="d3">停止</button>
    <script>
        let startBth = document.getElementById('d2')
        let stopEle = document.getElementById('d3')
        let inputEle = document.getElementById('d1')
        //4.专门定义一个展示时间的函数
        function showTime(){
             //2.获取当前时间对象
            let cTimeObj = new Date()
            //3.添加到input标签value属性中
            inputEle.value = cTimeObj.toLocaleString()
        }
        //6.定义一个存储定时器对象的全局变量(因为多个函数都要用)
        let timeObj = null
        //1.先给开始按钮绑定一个点击事件
        startBth.onclick = function () {
            //8.判断变量是否已经指代了定时器,如果起了一个任务,变量只能指向这一个
            //取反
            if (!timeObj){
                 //5.加一个循环定时任务
            timeObj = setInterval(showTime,1000)
            }
            //给停止按钮绑定一个取消定时器的点击事件
        stopEle.onclick = function (){
                clearInterval(timeObj)  //移除任务,并不会清空变量的值
            //9.清空变量的值
            timeObj = null
        }
        }
    </script>
</body>
Link to comment
Share on other sites