jQuery操作

属性的设置

注意：如果你的选择器选出了多个对象，那么默认只会返回第一个对象的属性。

.attr(name|pro|key,val|fn)
- 一个参数获取属性的值
- 两个参数设置属性的值
.removeAttr(name) - 删除属性的值
.prop(n|p|k,v|f) - 属性的返回值是布尔类型
.removeProp(name) - 删除属性的值

<script>
    //全选事件
    $("#all").on('click',function () {
        $(":checkbox").prop('checked',true)
    });
    //取消事件
    $("#cancel").on('click',function () {
        $(":checkbox").prop('checked',false)
    });
    //反选事件
    $("#reverse").on('click',function () {
        var checkboxeles =$(":checkbox");
        checkboxeles.each(function () {
            var this_box=$(this);
            var is_checkde=$(this).prop('checked');
            this_box.prop('checked',!is_checkde)

        })
    });

例

jquery中的循环

关键字： each
第一种循环方式：$.each(数组/对象, function(i, v){})
第二种循环方式：$("div").each(function(){})

jQuery中对css类的操作

.addClass(class|fn) 添加类属性
.removeClass([class|fn]) 　删除类属性
.toggleClass(class|fn[,sw]) 切换类属性，有就去掉，没有就加上

 $("#login_btn").on('click', function () {
        $(".form-group").removeClass("has-error");
        $("form span").text("");
        var input = $("input");
        input.each(function (i, v) {
            var isnone=$(v);
            if (isnone.val().trim() == '') {
                            $(this).parent().parent().addClass('has-error');
                            $(this).next().text('不能为空');
                            return false
                        }

        });

            return false
    })

例

jquery对HTML,文本,输入值的操作

.html([val|fn]) --没有参数就是获取对应的值,有参数就是设置对应的值(加html标签)
.text([val|fn]) 　　 --没有参数就是获取对应的值,有参数就是设置对应的值(加文本)
.val([val|fn|arr]) 　 --是input获取的是input框中的值，是checkbox就获取他的value值，是select单选就是值，多选就是数组。

jQuery对CSS属性的操作

.css() 　　　　加参数设置css属性
.css("color") -> 获取color的 css值
.css("color", "#ff0000") -> 设置color的css值
.css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
.css(["color", "border"]) -> 获取多个值

.offset() - 获取相对位置（比较的对象是 html）
.position() - 获取相对已经定位的父标签的位置（-比较的是最近的那个做过定位的父标签）

scrollTop([val]) - 返回顶部
scrollLeft([val]) -返回左边

$(window).scroll(function () {
      if($(window).scrollTop()>100){
          $(".c2").removeClass("hide")
          }
          else {
           $(".c2").addClass("hide");
      }
    })

例

.height([val|fn]) -元素的高度
.width([val|fn]) -元素的宽度
.innerHeight() -带padding的高度
.innerWidth() -带padding的宽度
.outerHeight([soptions]) - 在innerHeight的基础上再加border的高度
.outerWidth([options]) -- 在innerHeight的基础上再加border的宽度

jquery对文档的操作

内部插入：
.append(content|fn) -->A.append(B) -> 把B添加到A的后面
.appendTo(content) -->A.appendTo(B) -> 把A添加到B的后面
.prepend(content|fn) -->A.prepend(B) -> 把B添加到A的前面
.prependTo(content) -->A.prependTo(B) -> 把A添加到B的前面
外部插入:
.after(content|fn) --> A.after(B) --> 把B添加到A的后面
.insertAfter(content) -->A.insertAfter(B) --> 把A添加到B的后面
.before(content|fn) --> A.before(B) --> 把B添加到A的前面
.insertBefore(content)-->A.insertBefore(B) --> 把A添加到B的前面

替换：
.replaceWith(content|fn) -->A.replaceWith(B) --> B替换A
.replaceAll(selector) -->A.replaceAll(B) --> A替换B

删除:
.empty() - 清空内部清空
.remove([expr]) - 删除整体都删除
.detach([expr]) -剪切多保存在变量中，方便再次使用
复制:
.clone([Even[,deepEven]])

jquery的动画效果

基本：
.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])- css属性值都可以设置(自定义属性)

<script>
    $("#b1").on("click", function () {
//        $("img").show();
        $("img").toggle();

    })
    // 淡出
    $("#b2").on("click", function () {
        $("img").fadeOut("fast");
    })
    // 淡入
  $("#b3").on("click", function () {
      // 掌握了增加时间的方法
        $("img").fadeIn(3000, function () {
            alert("111");
        });
    })
    // 淡出到0.66透明度
  $("#b4").on("click", function () {
      // 掌握了新知识
        $("img").fadeTo(3000, 0.66, function () {
            alert("222");
        });
    })
    // 淡入淡出
  $("#b5").on("click", function () {
        $("img").fadeToggle(3000, function () {
            alert("333");
        });
    })
    // 动画-图片变小
  $("#b6").on("click", function () {
        $("img").animate({
             "100px",
            height: "60px",
        }, 3000, function () {
            // 这是回调函数
            alert(123);
        });
    })
</script>

例

jQuery绑定事件的方法

jQuery绑定事件的方式：
. $(ele).on("click", function(){}) 　　　　　　　　　　--普通的事件绑定
. $("tbody").on("click",".btn-warning",function(){}) --事件委派