• 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操作标签1 .类操作2。风格操作3。定位操作2。文本值运算3。属性操作4。文件处理。事件操作1.1克隆事件1.2暂停事件1.3值监控事件1.4防止后续事件1.5冒泡事件1.6委托事件6。动画效果7。引导框架8。基本都是用bootstrap框架。

一.jQuery操作标签

1.class操作

#类操作

JQuery操作

Add () #添加指定的css类名

RemoveClass() #删除指定的css类名

HasClass() #确定样式是否存在。

ToggleClass() #切换css类名,移除但不添加。

2.样式操作

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

添加到div块级标签的5px粗细的边框为红色'

3.位置操作

Offset() #获取当前窗口中匹配元素的相对偏移量或设置元素位置。

Position() #获取匹配元素相对于父元素的偏移量

ScrollTop() #从滚动条顶部获取匹配元素的偏移量。

ScrollLeft() #获取匹配元素从滚动条左侧的偏移量。

你可以通过滚动条做额外的操作。

3qpdmwa0mkb3946.jpg

二.文本值操作

文本()

Html() #在括号中写值来设置所有匹配元素的内容。如果不写值,就得到所有匹配元素的内容。

瓦尔()

'文件需要转换成js对象'

三.属性操作

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

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

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

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

获取标签属性时,Attr()不适用于动态属性

'检查动态属性的默认标签'

'通过attr检查,没有任何东西'

而通过prop,可以得到checked对应的布尔值,如果是真,就不是假。'

Attr用于标签上的所有可见属性和自定义属性。

Prop用于那些返回布尔值的对象,如复选框、单选按钮和选项,无论它们是否被选中。

1 id="四文档处理">四.文档处理
# 内部添加
$(A).append(B)                     # 把B追加到A
$(A).prepend(B)                    # 把B前置到A
# 外部添加
$(A).after(B)                      # 把B放到A的后面
$(A).before(B)                     # 把B放到A的前面
# 清空内容
$('body').empty()
gkit0qot21x3947.jpg

五.事件操作

1.1克隆事件

click(function(){...}) 关键字.clone
克隆事件代码
<button id="d1">晚安</button>
  <script>
        $('#d1').click(function () {
        // $('body').append($(this).clone())  // 不克隆事件
        $('body').append($(this).clone(true))  // 克隆事件
        })
  </script>

1.2悬浮事件

hover(function(){...})
悬浮事件代码
$('#d1').hover(function () {alert(123)})
$('#d1').hover(
  function () {alert(123)},       # 悬浮触发
  function () {alert(123)}        # 移走触发
)

1.3值监听事件

$('#d1').on('click',function(){})
值监听代码
<input type="text" id="d1">
<script>
    $('#d1').on('input',function () {
        console.log($(this).val())
    })
</script>

1.4阻止后续事件

方式1. return faklse                 # 消当前标签对象后续事件的执行
方式2. 关键字.preventDefault() 
组织后续事件
1.方式1(推荐使用)
	$('#d1').click(function () {
     alert(123)
     return false  //  取消当前标签对象后续事件的执行
    })
2.方式2(自带关键字)
	$('#d1').click(function (e) {
            alert(123)
            e.preventDefault()
    })

1.5冒泡事件

# 多个标签嵌套相同的事件,会重复执行事件
方式1. return false                # 阻止事件传播
方式2. 关键字.stopPropagation()

1.6委托事件

'针对动态创建的标签 提前写好的事件默认是无法生效的'
关键字 on
$('body').on('事件类型','选择器',function(){})
'将body内所有的点击事件交给选择器标签处理'
oeeau4wojh43948.jpg

六.动画效果

hide         # 隐藏
show         # 显示
# 滑动显示       
slideUp      
slideDown
# 淡入淡出
fadeIn       
fadeOut
animate

七.bootstrap框架

# 1.bootstrap版本
推荐使用v3版本
# 2.基本使用
本地导入
cdn导入  'bootcdn'
bootstrap需要使用jQuery来实现动态效果
'必须先导入后使用'
# 3.文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件

八.bootstrap框架基本使用

# 布局容器
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'btn-info
# 按钮颜色
class="btn btn-info"
class="btn btn-danger"
class="btn btn-warning"
class="btn btn-primary"
class="btn btn-success"
# 按钮尺寸
class="btn btn-success btn-sm"
class="btn btn-success btn-lg"
class="btn btn-success btn-block"
# 图标
http://www.fontawesome.com.cn/   更多图标
dtsykqup0dh3949.jpg
Link to comment
Share on other sites