jQuery 零基础到入门

jQuery

是一个 JavaScript 库，封装了常用的开发功能，和一些需要的方法，来提高开发效率。

用法

1. 下载 jQuery-1.12.4.js 放到 js 文件夹下面

官网有两个版本的 js 库

jquery-1.12.4.js    // 具有代码编程规范，即代码可以看，有注释
jquery-1.12.4-min.js    // 由以上 js 代码压缩，去掉了无关空格，换行，注释，变量命名更短    网页加载速度更快

2. index.html 导入 js 库

<script type="text/javascript" src="./js/jquery-1.12.4.js"></script>



// HTML5 已将 JavaScript 设置为默认脚本语言，可如下编写
<script>
    // js代码
</script>

3. 将 js 代码写在 DOM加载完成事件处理函数中。

$(function(){
    //  js 代码
});

以上代码等同于

$(document).ready(function(){
    // js 代码    

  // 此代码会在 页面 DOM 加载完成后 触发 DOMContentLoad 事件 而执行，而不用等待图片加载完成。。。
     // 可以写多个 $(function(){}); 且都会执行


  // 优于 window.onload() ， load事件 必须要等到页面所有资源都加载完成才会触发
        // window.onload();    如果写多个，则只会生效最后一个
});


还等同于
$().ready(function(){
　　// js 代码    jQuery 默认参数是 document
});

// 一个网页的加载顺序是：
    // 1. 域名加载
    // 2. HTML 加载 DOM    这里加载完了就触发 DOMContentLoad 事件
    // 3. 加载 js、css    
    // 4. 加载图片、视频等等资源，    这里加载完了就触发 load 事件


// 用法 document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);

jQuery 的两把利器

jQuery 核心对象 $ jQuery

做为对象使用，调用 jQuery 的方法

$.each();
- 隐式遍历数组
- ```
$.each(arr, function(index, eleVal){
    console.log("arr["+index+"] :  "+eleVal);
});
```
  扫描二维码关注公众号，回复： 3986339 查看本文章
$.trim();
- 去掉字符串首尾空格
- ```
$.trim("   哈啊    ");    // "哈啊"
```

$.type();

判断数据的类型

$.type(jQuery);    // "object"    证明 jQuery 也是一个对象

$.isArray();

判断是否是数组

$.isArray( $("#content") );    // false    证明 jQuery 的 css选择器得到的是 类数组对象

$.isFunction()

判断数据是否是函数

$.isFunction(jQuery);    // true    证明 jQuery 也是一个函数

这两个是库提供给外界的接口

枚举对象的属性

for(var eleIndex in aObj ){
    console.log(aObj[eleIndex]);
}

- jQuery 核心函数

jQuery();
- jQuery 提供给用户的 API 接口 有两个变量
  - ```
  jQuery();
  
  
  //等价于
  $();
```

- 多库共存
  - 由于除了 jQuery 库，其他的库可能也使用了 $ 作为 API 接口，
  - jQuery 提供了 .noConflict() 函数，释放对 $ 的所有权，还可以指定新的变量作为接口
    - var myJQ = jQuery.noConflict(); // 此行以下代码， myJQ(); 等同于 jQuery();
      此行代码以后，$ 就可以供其他库调用了。

jQuery对象转成 DOM 对象
- jQuery对象，使用 $("#id") 这样的选择器获取到的对象
  - 为了区别于 DOM 对象，变量命名以 $ 开头
  - ```
  var $firstA = $("#content a:nth-child(1)");
```

转为 DOM 对象，

$("#content a:first")[0];    // 返回对应 DOM 对象    因为 jQuery 使用 css 选择器获取元素时，总是返回一个类数组对象，成员为获取到的一个或多个元素


// 或者
$firstA[0];    // 返回对应 DOM 对象


// 或者
$("#content a:first").get(0);
$firstA.get(0);

操作 jQuery 对象的二值属性

.prop("checked", true);

.prop("checked", false)；

$("input:checked").prop("checked", false);
$("input:checked").prop("selected", false);
$("input:checked").prop("disable", false);
$("input:checked").prop("enable", false);

元素的高度/宽度

// content    支持设置
$("#box").height();
$("#box").width();



// content+padding   不支持设置
$("#box").innerHeight();
$("#box").innerWidth();



// content+padding+border    不支持设置
$("#box").outerHeight();

// 如果传入 true 则获取 content + padding+border+margin
$("#box").outerWidth(true);

获取/设置元素的位置
- 相对于网页页面左上角 .offset()
  - 读取位置
    - $("#box").offset().top; $("#box").offset().left;

设置位置

$("#box").offset({
    top: 100,
    left: 200 
});

- 相对于父元素左上角 .position()
  - 读取位置
    - $("#box").position().top; $("#box").position().left;

设置位置

$("#box").position({
    top: 100,
    left: 200 
});

移除元素 .remove()

// <body>    <div id="box"> 我是一个div </div>    </body>

$("#box").remove();

// <body>        </body>

移除元素文本内容 .empty();

// <p>哈哈哈哈哈</p>

$("p").empty();

// <p></p>

事件绑定 .on("click", func1); 与解绑 .off("click", func1);

on 还可以用于事件委派（根据事件冒泡原理实现: 子元素的事件，会向祖先元素传递）
- ```
$("#ulList").on("click", "li", function(){
    alert("I am "+ $(this).text() );
});
```

- jQuery 函数的 this 总是返回 DOM对象
  - 如果要使用 jQuery 对象的方法，需要 $() 转换成 jQuery 对象

鼠标移入/移除事件
- 只在移入绑定元素时触发，移入子元素不重复触发

在移入绑定元素时触发，移入子元素

jQuery 零基础到入门

猜你喜欢