• 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.class操作

框架

数字正射影像图

形容

addClass()

classList.add()

添加类别属性

removeClass()

classList.remove()

移除类属性

hasClass()

classList.contains()

确定类别属性是否存在。

toggleClass()

classList.toggle()

如果有,就去掉;如果没有,再补充。

2.样式操作

标记名. css('属性名','属性值')

3.位置操作

$(窗口)。scrollTop() #获取左侧滚动条从顶部开始的位移。

文本操作

框架

形容

文本()

内部文本

获取文本内容(无法识别标记语法)

html()

内容

获取文本内容(识别标记语法)

瓦尔()

价值

价值

转换为本机js对象

文件

文件

属性操作

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

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

$ ('div ')。attr ({'name' :' Oscar ',' sex' 3360' male'}) #批量设置多个标签

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

'''

不建议使用Attr(),但对于动态属性,尤其是复选框,建议使用prop()。

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

Prop('checked ',真/假)是动态设置的

'''

id="文档处理">文档处理
# 1.内部添加
$(A).append(B)  # 把B追加到A
$(A).prepend(B)  # 把B前置到A
# 2.外部添加
$(A).after(B)  # 把B放到A的后面
$(A).before(B)  # 把B放到A的前面
# 3.清空内容
$('标签选择器').empty()  # 清空标签选择器中的所有内容

事件操作

# 1.jQuery绑定事件
jQuery对象.click(function(){})  # 单击事件
jQuery对象.change(function(){})  # 双击事件
# 2.克隆操作
<p id="d1">克隆操作</p>
<script>
  $('#d1').click(function (){
    // $('body').append($(this).clone())  //不可隆事件,只能点击我们设置的标签克隆
    $('body').append($(this).clone(true))  // 克隆事件,克隆出来的点击也能克隆
  })
</script>

悬浮事件

	控制鼠标悬浮上去和移开各自触发一次,如果想要将悬浮和移开分开执行不同的操作,就需要两个函数。
<button id="d1">克隆操作</button>
<script>
  $('#d1').hover(
          function () {alert(123)}),  //悬浮触发
            function () {alert(456)}  //移走触发
</script>

监听事件

# jQuery绑定事件两种方式
	方式一:
        $('标签名').click(function(){})
	方式二:
        $('标签名').on('click',function(){})

阻止后续事件

	如果给已经有事件的标签绑定事件,那么就会依次执行,就叫做'后续事件',想要取消后续事件的执行,有两种方式:
	方式一:  //推荐使用
        $('标签名').click(function){
            函数体代码
            return flase  // 取消当前标签对象后续事件的执行
        }
	方式二:
        $('标签名').click(function)(e){
            函数体代码
            e.preventDefault()  // 取消当前标签对象后续事件的执行
        }

事件冒泡

	在多个标签嵌套并且都有相同事件的情况下,会出现逐级汇报的现象,也就是'冒泡事件',有两种解决方式:
	方式一:  // 推荐使用
        return false
    方式二:
        e.stopPropagation()

事件委托

	针对动态创建的标签,提前写好的事件默认是无法生效的,但是我们可以用事件委托,达成我们想要的效果:
	$('body').on('事件类型','选择器',function(){})  # 将body内每某个事件类型的所有事件,全部交给某个选择器处理

动画效果

代码 效果
hide 隐藏
show 显示
slideUp 向上滑动
slideDown 向下滑动
fadeIn 淡入
fadeOut 淡出
animate 自定义

bootstrap框架

# 1.版本
	推荐使用v3版本
# 2.基本使用
	先导入后使用,可以下载之后本地导入,也可以cdn加速导入,但是呢bootstrap需要使用jQuery来实现动态效果
# 3.文件组成
	bootstrap需要导入两个文件,一个是CSS文件,一个是JS文件
"""使用前端框架,几乎不需要自己写css,只需要写class即可"""

1.布局容器

class = 'container'  # 两边有空白
class = 'container-fluid'  # 两边没有空白

2.栅格系统

class = 'row'  # 默认开设一行均分为12份
class = 'col-md-n'  # 指定需要几份
'''
如果一行12份用不完,可以调整位置
col-md-offset-n  # 往左边移动几份
'''

3.表格样式

# 1.表格样式
	class = "table table-hover table-striped table-bordered"
# 2.单元格颜色
	class = "active"
    class = "success"
    class = "warning"
    class = "danger"
    class = "info"

4.表单样式

.pull-lift  # 左浮
.pull-right  # 右浮
'''
class = 'form-control'  # 针对单选框和多选框不能加
'''

5.按钮与图片

# 1.按钮样式
	class = 'btn'
# 2.按钮颜色
	class = 'btn-info'
    class = 'btn-danger'
    class = 'btn-warning'
    class = 'btn-primary'
    class = 'btn-success'
# 3.按钮尺寸
	class = 'btn-sm'
    class = 'btn-lg'
    class = 'btn-block'

6.图标样式

<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/

pmtk3i2gv3c4235.jpg
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now