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

样式操作

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

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

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

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

class list . add();添加一个新的类名,如果已经存在,取消添加。

class list . remove();删除现有的类名。

class list . contains();确定指定的类名是否包含在元素中,返回值为true和false。

class list . toggle();如果给定的值存在于classList中,则删除它;否则,添加它。

位置操作

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

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

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

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

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

ps:

的。offset()方法允许我们检索一个元素相对于文档的当前位置。之间的区别。偏移量()和。位置()就是那个。position()是相对于父元素的位移。

文本值操作

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

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

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

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

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

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

Val([val1,val2])//设置多选复选框和多选选择的值。

eg:

type=' checkbox ' value=' basketball ' name=' hobby '篮球

type=' checkbox ' value=' football ' name=' hobby '足球

选择多个id='s1 '

选项值='1'1/option

选项值=' 2 ' 2/选项

选项值=' 3 ' 3/选项

/选择

属性操作

用于ID等。或自定义属性:

Attr(attrName)//返回第一个匹配元素的属性值

Attr(attrName,attrValue)//为所有匹配的元素设置属性值。

Attr ({K1:V1,k 23360v 2 })//为所有匹配的元素设置多个属性值

RemoveAttr()//从每个匹配的元素中删除一个属性。

例如:

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

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

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

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

文档处理

添加到指定元素的后面:

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

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

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

在指定元素内添加到前面:

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

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

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

添加到指定元素之外的后面:

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

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

$(A).after(B)// 把B放到A的后面
  • 添加到指定元素外部的前面:
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

  $(A).before(B)// 把B放到A的前面

  • 移除和清空元素:
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
$('body').empty()

 

事件操作

  • js绑定:

标签对象.onclick = function(){}

标签对象.onchange = function(){}

  • jQuery绑定:

jQuery对象.click(function(){})

jQuery对象.change(function(){})

悬浮事件

$('#d1').hover(function () {alert(123)})

鼠标悬浮上去和移开各自触发一次;如果想要将悬浮和移开分开执行不同的操作,需要写两个函数。

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

 

值监听事件

jQuery绑定事件有两种方式:

  1. $('#d1').click(function(){})
  2. $('#d1').on('click',function(){})

有时候第一种绑定事件的方式无法生效,那么就使用第二种。

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

 

阻值后续事件

如果给已经有事件的标签绑定事件,那么会依次执行。
如果想要取消后续时间的执行,可以使用两种方式阻止。

  • 方式1(推荐使用):

$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})

  • 方式2(自带关键字):

$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})

 

事件冒泡

在多个标签嵌套的并且都有相同事件的情况下,会出现逐级汇报的现象。

方式1:return false

方式2:e.stopPropagation()  给函数传入e函数

事件委托

针对动态创建的标签,提前写好的事件默认是无法生效的。

  • $('body').on('事件类型','选择器',function(){})
  • $('body').on('click','button',function(){})    将body内所有的点击事件交给button标签处理

动画效果

// 基本
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]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])

bootstrap框架

用bootstrap规定好的HTML结构来构建HTML结构,再给具体的标签特定的类名(特定的全局属性),就能实现特定的页面样式与功能。

bootstrap内部提供了很多漂亮的标签样式和功能;bootstrap框架推荐使用v3版本。

bootstrap的基本使用:

必须先导入后使用;两种导入方式:

1、本地导入;

2、cdn导入;

bootstrap需要导入两个文件;一个是css文件;一个是js文件。

布局容器

class = 'container':两边有留白

class = 'container-fluid':没有留白

格栅系统

可以将前端页面每一行均分成12份;如果一行十二份用不完,还可以调整位置。

class = 'row'  默认开设一行均分12份

class = 'col-md-n'  指定需要几份(电脑屏幕)

ps:

栅格参数可以做到响应式布局>>>:手机col-xs;平板col-sm;pc显示器col-md/col-lg

表格样式

参考官网即可,有样式有源码,拷贝使用即可。

表格样式:

class="table table-hover table-striped table-bordered"

单元格颜色:

class="active"
class="success"
class="warning"
class="danger"
class="info"

 

表单样式

class='form-control'>>>:可用于input框;针对radio和checkbox不能加!!!

.pull-left >>>左浮

.pull-right >>>右浮

按钮与图片

按钮样式:

class = 'btn'  用于按钮

按钮颜色:

 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"

图表样式

class="glyphicon glyphicon-user"

更多图标见网站:http://www.fontawesome.com.cn/

 

Link to comment
Share on other sites