开始jQuery学习之旅

jQuery写法

//实例写法
$('div').css({width:200,backgroundColor:'red'});

参数规则

// css selector
$('.wrapper ul li').css({width:100,backgroundColor:'red'});

//jquery unique selector
$('.wrapper ul li:first')选择第一个li元素 （last最后一个）
$('.wrapper ul li:odd')选择奇数元素（even偶数元素）
$('.wrapper ul li:eq()')单独选择某一元素（负数是从后往前数）
$('li[data="abc"]')（选择属性data为abc的Li元素）
$('li[data$="abc"]')（以abc结尾）
$('li[data^="abc"]')（以abc开头）
$('li[data！="abc"]')
$('li[data*="abc"]')

//null undefind '' 容错机制
//dom （用$包装成jquery对象，包装的目的是使用一系列jquery方法）

<div class = "wrapper">
     <div class = "demo">
         <span>span1</span>
     </div>
     <div class = "demo">
         <p>p1</p>
     </div>

     <div class = "demo">
         <span>span2</span>
     </div>
</div>
<script>
var colorArr = ['red','blue','yellow'];
$('.wrapper .demo').each(function(index,ele){
    //console.log(ele) (原生dom)
  $(ele).find('span').css({color:colorArr[index]});//（每一个demo都循环，没有span的demo返回空，不报错，就是容错机制）
  });
</script>

//function
$(function(){

});  
$(document).ready(function(){

});
（以上两种形式意义相同）

 //两个参数  css selector和context（上下文）
$('ul','.wrapper');

 jQuery 使用精髓

选择元素

循环操作

链式调用

 

//jQuery库  封闭作用域

原理：

(function(){
          function jQuery(selector){
            return new jQuery.prototype.init(selector);
          }
          jQuery.prototype.init = function (selector){
              //this = {};
              //选出 dom 并且包装成jQuery对象 返回
              // id class
              this.length = 0;
              if (selector.indexOf('.')!= -1){
                 var dom = document.getElementByClassName(selector.slice(1));
              }else if (selector.indexOf('#') != -1){
                 var dom = document.getElementById( selector.slice(1));
              }
         
              if (dom.length == undefined){
                  this[0] = dom;
                  this.length++;
              }else{
                //基础铺垫
                for (var i=0; i < dom.length; i++){
                    this[i] = dom[i];
                    this.length++;
                }
              }
              //return this;
          }
          
          jQuery.prototype.css = function(config){
            //循环操作每一个dom
            //循环操作
            for (var i = 0;i < this.length; i++){
               for (var attr in config) {
                    this[i].style[attr] = config[attr];
               }
            }
            //链式操作
            return this;
          }
           jQuery.prototype.init.prototype = jQuery.prototype;

          window.$ = window.jQuery = jQuery; 
        })();