• 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操作标签

'''

框架代码查找标签绑定的变量名推荐使用xxxEle美元

'''

# addClass()增加钢性铸铁类名相当于原生射流研究…中的classList.add()

var $divEle=$('div ').首先()

$divEle.addClass('c3 ')

S.fn.init[div.c1.c2.c3,prevObject: S.fn.init(1)]

# removeClass()移除钢性铸铁类名相当于原生射流研究…中的classList.remove()

$divEle.removeClass('c3 ')

S.fn.init[div.c1.c2,prevObject: S.fn.init(1)]

# hasClass() #判断有没有指定的钢性铸铁类名相当于原生射流研究…中的classList.contains()

$divEle.hasClass('c2 ')

真实的

# toggleClass() #有则移除,无则添加相当于原生射流研究…中的classList.toggle()

$divEle.toggleClass('c4 ')

S.fn.init[div.c1.c2.c4,prevObject: S.fn.init(1)]

OiYYFO.jpg

# 样式操作

增加一个粉红色的实现边框

$divEle.css('border ',' 3px纯粉色)

# 位置操作

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

'''

实时监测距离

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

if($window).scrolltop() 500){

警报('超过本页500了)

}

})

'''

OiNqy9.jpg

文本值操作

jQuery DOM

# 获取文本

文本()内部文本

# 获取超文本标记语言标签

html() innerHTML

# 获取价值值

瓦尔()值

'''

使用空括号就是获取,括号里面放操作代码就是设置

'''

# 实操

$('body ').文本()

\n \n \n \n \n $(窗口)。scroll(function(){\n if($(窗口))。scrollTop() 500){\n alert('超过500了)\n }\n })\n\n \n\n '

$('body ').html()

`\ n div style=' height : 600 px background-color :蓝紫色'/div \ n div style=' height : 600 px;背景色:蓝色'/div \ n div style=' height : 600 px;背景色: Rebecca purple '/div \ n \ x3c script \ n $(窗口)。scroll(function(){\n if($(窗口))。scrollTop() 500){\n alert('超过500了)\ n } \ n })\ n \ n \ x3C/script \ n \ n ` 1

$('body ').瓦尔()

''

$('bod

y').text('哎嘿') S.fn.init [body, prevObject: S.fn.init(1)] $('body').html('<h1> 芜湖</h1>') S.fn.init [body, prevObject: S.fn.init(1)]

OidqyQ.jpg

  • 属性操作

# 获取第一个标签为style属性值
$('div').attr('style')
# 批量设置单个
$('div').attr('class','c1')
# 批量设置多个
$('div').attr({'name':'owen','pwd':111})
# 批量移除
$('div').removeAttr('class') 
"""
 获取标签属性的时候, 针对动态属性尤其是复选框不建议使用attr()
 prop('checked')  # 结果为布尔值
 prop('checked',false) # 动态设置
"""

OigDnf.jpg

  • 文档处理

# 内部添加
$(A).append(B)   # 把B追加到A
$(A).prepend(B)  # 把B前置到A
#外部添加
$(A).after(B)  # 把B放到A前面
$(A).before(B)  # 把B放到A前面
# 清空内容
$('body').empty()  # 直接清空 body里面的所有东西
# 代码实操
let $pEle = $('<p>')
undefined
$pEle.text('这是一个p标签')
S.fn.init [p]
$('body').append($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').prepend($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').after($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').empty()
S.fn.init [body, prevObject: S.fn.init(1)]

jQuery事件操作

'''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>

OiLFjU.jpg

  • 悬浮事件

# 鼠标悬浮在上面和移开时触发各一次
$('#d1').hover(function () {alert('芜湖芜湖')})
# 想要将悬浮和移开分开执行不同的操作,就要写两个函数
    $('#d1').hover(
       function () {alert('今天要来点新鲜的吗')},
	   function () {alert('这么快就走啦')}
)
  • 值监听事件

"""
 jQuery绑定事件有两种方式
   $('#d1').click(function(){})
   $('#d1').on('click', function(){})
"""
# 实操
<input type="text" id="d1">
<script>
    $('#d1').on('input',function () {
        console.log($(this).val())
    })
</script>

OijeEQ.jpg

  • 阻止后续事件

"""
  如果给已经有事件的标签绑定事件, 那么会依次执行
  如果想要取消后续时间的执行有两种方式
"""
方式一:
    $('#di').click(function(){
        alert()
        return false
    })
方式二:
    $('#d1').click(function (e) {
            alert('bibibi')
            e.preventDefault()
    })
# 推荐使用第一个

OivHOK.jpg

  • 事件冒泡
"""
 在多个标签嵌套的并且都有相同事件的情况下, 会出现逐级汇报的现象
"""
方式1
	return false
方式2
	e.stopPropagation()
# 代码实现
<div id="d3"> 这是div标签
    <p id="d2"> 这是p标签
        <span id="d1"> 这是span标签</span>
    </p>
</div>
<script>
    $('#d1').click(function (){
        alert('span')
        return false
    })
    $('#d2').click(function (e){
        alert('p')
        e.stopPropagation()
    })
    $('#d3').click(function (){
        alert('div')
        return false
    })
  • 事件委托

"""
 针对动态创建的标签,提前写好的事件默认都是无法生效的
"""
# 书写格式
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

jQuery动画效果

hide # 隐藏
show # 展示
slideUp # 收起
sildeDown # 放下
fadeIn  # 淡入(透明度, 时间)
fadeOut  # 淡出(透明度, 时间)
animate  # 自定义

前端第三方框架

# bootstrap 框架
  内部提供了很多漂亮的标签样式和功能,我们只需要CV即可
    
# bootstrap版本
 推荐使用V3
  
# 使用方式
 先导入再使用
1、本地导入
2、cdn导入
# 文件组成
	bootstrap需要导入两个文件
  	一个是css文件
    一个是js文件
  • 布局容器

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"
# 代码实操
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
            <h1 class="text-center">数据展示</h1>
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center danger">序号</th>
                            <th class="warning">姓名</th>
                            <th class="success">性别</th>
                            <th class="info">年龄</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="danger">
                            <td>1</td>
                            <td>owen</td>
                            <td>male</td>
                            <td>20</td>
                        </tr>
                    <tr class="success">
                            <td>2</td>
                            <td>mary</td>
                            <td>female</td>
                            <td>28</td>
                        </tr>
                    <tr class="info">
                            <td>3</td>
                            <td>tony</td>
                            <td>female</td>
                            <td>38</td>
                        </tr>
                    <tr class="warning">
                            <td>4</td>
                            <td>jerry</td>
                            <td>male</td>
                            <td>48</td>
                        </tr>
                    <tr>
                            <td>5</td>
                            <td>oscar</td>
                            <td>male</td>
                            <td>58</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
</body>
</html>

OFZdG6.jpg

  • 表单样式

.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>

OFeKwd.jpg

  • 图标样式

<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/
Link to comment
Share on other sites