前端之jQuery(二)

6、操作标签a、样式操作样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
CSS
css("color","red")//DOM操作:tag.style.color="red"
位置:
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。和 .position()的差别在于: .position()是相对于相对于父级元素的位移。尺寸:
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
b、文本操作HTML:
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值:
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值:
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值
示例:获取被选中的checkbox或radio的值:
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
可以使用:
$("input[name='gender']:checked").val()
c、属性操作用于ID等或自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
注意:在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>
d、文档处理添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
7、事件a、常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
b、事件绑定
.on( events [, selector ],function(){})
  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数
  • c、移除事件
    .off( events [, selector ][,function(){}])
    off() 方法移除用 .on()绑定的事件处理程序。
  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数
  • 注意:像click、keydown等DOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:
    $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
        $(this).addClass('hover');
    });
    $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
        $(this).removeClass('hover');
    });
    d、页面载入当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。两种写法:
    $(document).ready(function(){
    // 在这里写你的JS代码...
    })
    简写:
    $(function(){
    // 你在这里写你的代码
    })
    e、事件委托事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。示例:
    $("table").on("click", ".delete", function () {
      // 删除按钮绑定的事件
    })
    8、动画效果
    // 基本
    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])
    9、补充a、eachjQuery.each(collection, callback(indexInArray, valueOfElement)):描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
    li =[10,20,30,40]
    $.each(li,function(i, v){
      console.log(i, v);//i是索引,v是每次循环的具体元素。
    })
    .each(function(index, Element)):描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this 总是指向这个元素。
    // 为每一个li标签添加foo
    $("li").each(function(){
      $(this).addClass("c1");
    });
    注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()方法:也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:
    $("li").addClass("c1");  // 对所有标签做统一操作
    注意:在遍历过程中可以使用 return false提前结束each循环。终止each循环b、.data()在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。.data(key, value):描述:在匹配的元素上存储任意相关数据。
    $("div").data("k",100);//给所有div标签都保存一个名为k,值为100
    .data(key):描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置
    $("div").data("k");//返回第一个div标签中保存的"k"的值
    .removeData(key):描述:移除存放在元素上的数据,不加key参数表示移除所有保存的数据。
    $("div").removeData("k");  //移除元素上存放k对应的数据
     

    相关内容推荐