jQuery属性，样式，文档处理，筛选（4-4）

jQuery

jQuery 常用方法（回调函数）

  • [x] jQuery中的回调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var $callback = $.Callbacks(); //把jQuery身上的Callback属性找到并且执行
    //可以把这个理解成一个数组 ==> 回调函数集合 []
    var fn1 = function (val){ console.log('fn1: ' + val)  }
    var fn2 =  function (val) { console.log('fn2: ' + val) }
    $callback.add(fn1); //把fn1和fn2分别添加到这个回调函数集合中 [fn1,fn2]
    $callback.add(fn2);
    //回调函数集合中的所有函数执行
    $callback.fire(100);
    $callback.remove(fn1);
    $callback.fire(200);
  • [x] jQuery中常这么用回调函数$(function() {}) 等同于<–> $(document).ready(function() {})
    作用
    • HTML加载完
    • 形成一个闭包
1
2
3
4
5
6
7
8
$(function() {
 	
 })
 
// 对应于原生js的
window.onload = function (){ 
	// 页面html,image等所有资源加载结束之后执行 
}

jQuery 常用方法

属性操作

  • [x] attr(attr, val)获取设置元素属性

    1
    2
    3
    4
    5
    6
    $mydiv.attr('name', 'li');
    $mydiv.attr({
        index: 1,
        name: "你好"
    });
    $mydiv.removeAttr('name');

  • [x] prop()获取设置元素属性（和attr属于两套方式，不能混用）
    内置可提现在HTML结构中提现出，不是内置的不能提现但可获取值

    1
    2
    3
    4
    5
    6
    7
    $mydiv.prop('name', "li"); //设置成功，但是在行内看不到
    $mydiv.prop('style', "width:100%"); //设置成功,行内可见
    $mydiv.removeProp('name');
    $mydiv.prop({
        name:"你好"
        'style', "width:100%"
    });

attr和prop的区别
attr一般用于自定义属性
prop一般用于内置属性（尤其表单元素操作）
$(‘input’).prop(‘checked’, true); //设置选中

  • [x] class类的

    1
    2
    3
    $('div',$mydiv).addClass('children');//上下文$mydiv的所有div添加class(每个元素调用addClass())
    $('div',$mydiv).removeClass('children'); 
    $('div',$mydiv).toggleClass('children'); //如有c1那么就删除，如没有c1那么就添加
    • [ ] jQuery中的遍历 等同于$('div',$mydiv).addClass('children');

    • for循环

      1
      2
      3
      4
      5
      var $childList=$('div',$mydiv);
      var $childList=$('div',$mydiv);
          for(var i=0;i<childList.length;i++){
              $($childList[i]).addClass("children");//$childList[i]是原生js元素
          }

    • each() :可以遍历jQuery集合中每一项（和数组中forEach类似，参数相反）

      1
      2
      3
      4
      5
      6
      var $childList=$('div',$mydiv);
      $childList.each(function(index,item){
         
          $(this).addClass("children");//this-->当前遍历这一项的内容item     
      // $(item).addClass("children");
      })

  • [x] html()、text()、val()

    • [ ] html() ==> innerHTML

      1
      2
      $mydiv.html(); //获取$mydiv的html
      $mydiv.html("aaaa") //设置$mydiv的html为aaaa

    • [ ] text() ==> innerText

      1
      2
          $mydiv.text(); // 获取
      $mydiv.text('fff'); //设置

    • [ ] val() 表单元素

      1
      2
          $('#input').val(); //获取
      $('input').val(2+"你好"); //设置

CSS设置获取样式

  • [x] css()

    1
    2
    3
    4
    5
    $mydiv.css('width','300');
    $mydiv.css({
        width: '400px',
        height: '400px'
    });

  • [x] offset()

    • 获取距离body的偏移量(top/left不管父级参照物是谁)

      1
      $("#child3").offset()

  • [x] css()

    • 获取相对于父级参照物的偏移（top/left）

      1
      $("#child3").position()

  • [x] height(),width()

    • 设置的内容宽无padding
      1
      $mydiv.height();

  • [x] innerWidth(),innerHeight()可视区宽高

    • 等同于clientWidth clientHeight 无边框
      1
      $mydiv.innerHeight();

  • [x] outerWidth(),outerHeight()

    • 等同于offsetWidth offsetHeight 加边框
    • 设置为 true 时，计算边距在内
      1
      2
      $mydiv.outerHeight();//不算margin
      $mydiv.outerHeight(true);//算margin

inner\outer设置的都一样（改变的是height/width=参数-(padding+border)）

  • [x] scrollLeft(val),scrollTop(val)

    • 原生js也只有这两个属性接受重新赋值
      1
      $mydiv.scrollLeft();

文档处理

创建个新元素newspan

1
2
3
4
5
6
var newspan = document.createElement('span');
newspan.id = "newspan"; //未添加，所以juery无法通过id获取新元素
$("#newspan")   //-->  [] 
newspan         //--> <span id=​"newspan">​</span>​
$(newspan)      //--> [<span id=​"newspan">​</span>​]

  • 因此下面采用jQuery对象$("#newspan")或原生js对象newspan添加元素都可以

  • [x] 父级与子级添加

  • [ ] append(par)

    1
    2
    $mydiv.append($(newspan));//或者$mydiv.append(newspan);
    $(newspan).appendTo($mydiv); //和append的用法正好相反

  • [ ] prepend(child)

    1
    2
    $mydiv.prepend(newspan);
    $(newspan).prependTo($mydiv)

  • [x] 同级追加

  • [ ] after(ele)、before(ele) 等同css的:before(在前面添加)

    1
    2
    $mydiv.after(newspan);
    $mydiv.before($(newspan));

  • [ ] insertAfter 、insertBefore --> 容器中指定元素前后追加新元素

    1
    2
    $(newspan).insertBefore($mydiv);
    $(newspan).insertAfter($mydiv);

  • [x] wrap 包裹 --> 用参数这个标签包裹住mydiv

    1
    $mydiv.wrap('<div class="parent"></div>');

  • [x] replaceAll 等同js replaceChild(new, old)

    1
    $("#child1").replaceAll("div");//$("#child1")替换所有div标签元素

  • [x] remove 等同js removeChild()

    1
    2
       $(".children").remove();
    $(".children").remove("#child1");//移除集合中的id为child1的元素

  • [x] clone() 等同jscloneNode();

    1
    2
    3
    var bro1 = document.getElementById("bro1");
    $(".children").clone().prependTo($(bro1));
    $(bro1).prepend($(".children").clone());

筛选（集合中选出想要的元素）

  • [x] 检索

    • eq(index)；index为负值时时倒数第几个
    • first()
    • last();
      1
      2
      3
      $("div").eq(0);
      $("div").first();
      $("div").last();

  • [x] hasClass(classname);-->检测当前元素中是否包含某一样式类名（返回布尔值）

    1
    $("div").hasClass("children");//true

  • [x] 常用筛选方法

  • [ ] filter()-->同级过滤(首先通过选择器获取一个集合，在获取的内容中进行二次筛选)

    1
    $("*",$mydiv).filter("div")

  • [ ] children()-->子级过滤

    1
    2
    3
    4
    5
    6
    $("#mydiv").children() -->所有艺元素
    $("#mydiv").children("#child2")
    $("#mydiv").children("div") 
    $("#mydiv").children("#child1,#child3"); 
    $("#mydiv").children("[name='elvira']"); 
    $("#mydiv").children("[name]");

  • [ ] find() -->所有后代过滤(必须传参，否则空)

1
2
3
$("#mydiv").find(); -->空
$("#mydiv").find("div"); -->$("#mydiv div")
$("#mydiv").find("[name='elvira']"); -->$("#mydiv [name='elvira']"

三个区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$mydiv.children("div");
[ < div class = ​"children" id = ​"child1" > ​我是child1​ < /div>​,  
    <div class = ​"children" id = ​"child2" > ​…​ < /div > ​,
    <div class = ​"children" id = ​"child3 " > ​我是child3​ < /div>​
]
$mydiv.find("div");
[ <div class = ​"children" id = ​"child1" > ​我是child1​ < /div>​,  
    <div class = ​"children" id = ​"child2" > ​…​ < /div > ​,
    <div class = ​"gran" > ​gran1​ < /div>​, 
    <div class = ​"gran" > ​gran2​ < /div > ​, 
    <div class = ​"gran" > ​gran3​ < /div>​,  
    <div class = ​"children" id = ​"child3 " > ​我是child3​ < /div >​]
$mydiv.filter("div");
[ < div id = ​"mydiv" > ​…​ < /div>​]