• 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操作标签类操作CSS位置操作文本值操作属性操作文档处理事件操作事件绑定移除事件克隆操作浮动事件值监控事件阻止后续事件事件冒泡事件委托动画效果前端框架布局容器网格系统表格样式表单样式按钮和图片图标样式补充

jQuery操作标签

class操作

add class();//添加指定的CSS类名。

remove class();//移除指定的CSS类名。

has class();//确定样式是否存在

toggle class();//切换CSS类名,存在则移除,不存在则添加。

CSS

$('p ')。css('颜色','红色');//将所有P标签的字体设置为红色

位置操作

$(窗口)。scrollTop() //从顶部获取右边滚动条的位移。

文本值操作

HTML代码:

Html()//获取第一个匹配元素的Html内容

Html(val)//设置所有匹配元素的Html内容

文本值:

Text()//获取所有匹配元素的内容

Text(val)//设置所有匹配元素的内容

价值:

Val()//获取第一个匹配元素的当前值

Val(val)//设置所有匹配元素的值

属性操作

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

$('div ')。attr('class ',' c1') //将单个类批量设置为c1

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

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

用于复选框和单选按钮

Prop() //获取属性

RemoveProp() //移除属性

文档处理

添加到指定元素的后面。

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

$(一)。appendTo(B)//将A追加到B。

添加到指定元素的前面。

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

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

添加到指定元素外部.的后面

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

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

添加到指定元素外部.的前面

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

$(一)。insertBefore(B)//将A放在B的前面。

移除并清空元素。

Remove()//从DOM中移除所有匹配的元素。

Empty()//删除匹配元素集中的所有子节点。

事件操作

/h2>

事件绑定

  1. .on( events [, selector ],function(){})
  • events: 事件

  • selector: 选择器(可选的)

  • function: 事件处理函数

    jQuery对象.click(function(){})
    jQuery对象.change(function(){})
    jQuery绑定事件有两种方式
    	$('#d1').click(function(){})
    	$('#d1').on('click',function(){})
    有时候第一种绑定事件的方式无法生效 那么就使用第二种
    

移除事件

  1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

  • events: 事件
  • selector: 选择器(可选的)
  • 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)}  # 移走触发
)

值监听事件

<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(){})
// 如果body内有多个button 不需要去给每一个都绑定一个事件
1.可以大量节省内存占用,减少事件注册,比如在ul上代理所有li的click事件。
2.可以实现当新增子对象时无需再次对其绑定(动态绑定事件)

动画效果

// 隐藏
show([s,[e],[fn]]) // 显示
hide([s,[e],[fn]]) // 隐藏
toggle([s],[e],[fn]) // 切换
// 滑动
slideDown([s],[e],[fn]) // 向下滑动
slideUp([s,[e],[fn]]) // 向上滑动
slideToggle([s],[e],[fn]) // 切换
// 淡入淡出
fadeIn([s],[e],[fn]) // 淡入
fadeOut([s],[e],[fn]) // 淡出
fadeTo([[s],o,[e],[fn]]) // 切换
fadeToggle([s,[e],[fn]]) // 修改淡化效果为给定的值(值介于 0 与 1 之间)。
// 自定义(了解即可)
animate(p,[s],[e],[fn])

前端框架

# bootstrap框架
	内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可
# bootstrap版本
	推荐使用v3版本
# 基本使用
	必须先导入后使用
  	1.本地导入
    2.cdn导入
    	bootcdn
 	bootstrap需要使用jQuery来实现动态效果
 
# 文件组成
	bootstrap需要导入两个文件
  	一个是css文件
    一个是js文件
  
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> // 两边有留白
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid"> // 没有留白
  ...
</div>

栅格系统

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/

补充

学习编程,一定要会看官方文档,不仅是bootstrap框架
Link to comment
Share on other sites