1.JQ导入

什么是jQuery？

jQuery是一个简洁高效的且功能丰富的JavaScript工具库，是对原生JavaScript二次封装的工具函数集合。

优点：开源 | 简洁的选择器 | 简化的Ajax操作 | 良好的浏览器兼容 | 强大的链式操作

2.JQ选择器

// 获取满足条件的所有页面元素jq对象$('css3选择器语法');// 拿到指定索引的页面元素jq对象$('css3选择器语法').eq(index);// 拿到指定索引的页面元素js对象 (jq对象转js对象)$('css3选择器语法').get(index);// js对象转jq对象$(js对象);

    
              
      
       123
      
      
       456
      

3.文档加载

// js// 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法window.onload = function() {}// jq// 页面结构加载完毕, 能绑定多个事件方法, 可以简写// 一:可以保证页面结构一定加载完毕, 二:可以保证数据的局部化(不会被外界直接读写)$(function(){})

    
                  
          
          
                      
      
       123
      
    
      
       456
      
    

4.JQ操作元素对象

// 链式操作: (几乎)每一个方法都具有返回值(元素对象)// 1.文本内容var res = $('.box:first-child').text("100").html("888");// console.log(res);// 2.样式res = $('.box').eq(1)    .css("color", "pink")    .css("font-size", "30px")    .css({    backgroundColor: "orange",    "height": "80px"})    .css("width", function (index,oldVal) {    console.log(this); // js对象 转化为jq对象来使用    console.log($(this).height());    // 宽度为自身高度的2倍    return $(this).height() * 2;})    .css("border-radius"); // 能获取计算后样式// console.log(res);// 3.类名res = $('.box:nth-child(3)').addClass("abc").removeClass("abc");console.log(res);// 4.全局属性$('img').attr("src", "http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg")    .removeAttr("src");console.log($('img').attr("ooo"));

5.JQ获取盒子信息

1.显示信息

// 盒子信息:// 宽高 | 内边距 | 宽边 | 外边距var res = $('.box').css("padding");console.log(res);// 宽高res = $('.box').width();res = $('.box').height();console.log(res);// 宽高+内边距res = $('.box').innerWidth();res = $('.box').innerHeight();console.log(res);// 宽高+内边距+边框res = $('.box').outerWidth();res = $('.box').outeHeight();console.log(res);// 宽高+内边距+边框+外边距res = $('.box').outerWidth(true);res = $('.box').outerHeight(true);console.log(res);

2.位置信息

// 相对窗口偏移: 算margin产生的距离console.log($('.box').offset().top, $('.box').offset().left);// 绝对定位偏移(top,left): 不算margin产生的距离console.log($('.box').position().top, $('.box').position().left);

6.事件

//事件名，函数$('.box').on('click',function (ev) {    //jq事件对象对js事件对象兼容    console.log(ev);})//取消默认事件：取消系统自带的功能，右键的右键框，a标签点击的href转跳ev.preventDefault(); | 事件方法 return false;//阻止事件的传播（阻止事件的冒泡）：父子有同样事件，子响应了事件，会将事件传递给父，父级也会响应同样的事件//只让子点击相应，只点击到父，父响应，子级需要阻止事件的传播ev.stopPropagation();

    
                  
      
        
       123        
       456