day05.02

jQuery操作标签

样式操作

addClass();// 添加指定的CSS类名
removeClass();// 移除指定的CSS类名
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
classList.add();添加新的类名，如已经存在，取消添加
classList.remove();移除已经存在的类名
classList.contains();确定元素中是否包含指定的类名，返回值为true 、false
classList.toggle();如果classList中存在给定的值，删除它，否则，添加它

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
$(window).scrollTop()//获取左侧滚动条距离顶端的位移量

ps:

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。.offset()和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

文本值操作

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

eg:
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

 

属性操作

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
eg：

  $('div').attr('style') 获取第一个标签的style属性值$('div').attr('class','c1') 批量设置单个
  $('div').attr({'name':'jason','pwd':123}) 批量设置多个$('div').removeAttr('class') 批量移除

 

文档处理

• 添加到指定元素内部的后面：

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).append(B)// 把B追加到A

• 添加到指定元素内部的前面：

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
$(A).prepend(B)// 把B前置到A

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

$(A).after(B)// 把B放到A的后面
$(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/