# jeQuery

**Repository Path**: arts1986/jeQuery

## Basic Information

- **Project Name**: jeQuery
- **Description**: je基于原生js封装的一些快捷选择器，同时是一个轻量、小巧的js框架，精简易懂的API设计，支持链式调用，有点jQuery的味道。核心部分为选择器(selector)、dom操作、event机制。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: gh-pages
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2016-01-13
- **Last Updated**: 2022-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Je Javascript Library

这是一个Javascript的小型类库，开始我把他称为框架，后来想了想，称为库比较合适。
这里面的api兼容了jQuery的写法，也借鉴了不少jQuery的设计模式。特点是小，继承了很多常用的方法。
由于Javascript也是刚学习不久，兼容性也达不到jQuery那么强悍的水准。
但是对于我来说，这是一种知识不断积累的过程，意义其学习的意义远大于实际应用。代码都是一些常见的设计思路，没有jQuery的复杂和迂回，适合和我一样刚入门的童鞋参考和学习。

## Api文档

### 基础选择器

* $(selector) 或 Je(selector)
* 支持(tag), (#id), (.className) ,(tag > .className) ,(tag > tag) ,(#id > tag.className) , (.className tag) ,(tag, tag, #id) ,(tag#id.className) ,(span > * > b) ,(input[name=radio])的传入，不支持伪类，返回Je对象。

* .eq(index)

传入索引值，返回对应的节点的Je对象。

支持传入负值，如：`$("a").eq(-1)`取最末尾节点。

* .find(selector)

返回相应后代节点的Je对象。

* .children([selector])

只在子节点遍历，返回全部或相应子节点的Je对象。

* .parent()

返回父节点的Je对象，已排重。

* .parents([selector])

返回上级节点对应选择器的Je对象，已排重。

* .next()

返回Je对象第一个元素之后第一个兄弟节点。

* .nextAll()

返回Je对象第一个元素之后所有兄弟节点。

* .prev()

返回Je对象第一个元素之前第一个兄弟节点。

* .prevAll()

返回Je对象第一个元素之前所有兄弟节点。

* .siblings()

返回Je对象第一个元素除自身以外所有兄弟节点。

* .append()

在元素里面内容的末尾插入内容。

* .prepend()

在元素里面内容的前面插入内容。

* .before()

在元素之前插入内容。

* .after()

在元素之后插入内容。

### 节点操作

* .each()

遍历Je对象中的节点，进行相应的操作。如：

    $("a").each(function() {
        console.log(this);
    });

* .attr(name[, value])

只传入第一个参数，返回Je对象中第一个节点对应的属性值。

传入两个参数，设置节点的属性值。

注：可能会遇到在某些浏览器下无法设置属性的问题。

* .removeAttr(name)

删除元素相应属性。

* .prop(name[, value])

读取或设置节点的Property属性。

* .removeProp(name)

删除节点的Property属性，如果是原生属性还是少删为妙。

* .val([value])

只传入第一个参数，返回Je对象中第一个表格类节点（input、button等）的value值。

传入两个参数，设置节点的value值。

* .html([string])

不传入参数返回Je对象中第一个节点的html内容。

传入字符串设置节点的html内容，如：`$("div").html("<p>Je</p>")`。

* .text([string])

不传入参数返回Je对象中第一个节点的文本内容。

传入字符串设置节点的文本内容，如：`$("h1").html("Je")`。

注：由于现代浏览器的textContent和ie的innerText实现结果还是有一点点区别，所以。

* .data(name[, value])

对应元素读取或写入缓存数据。

* .removeData(name)

对应元素删除缓存数据。

* .remove()

删除相应节点。

### 样式操作

* .hasClass(name)

判断元素是否存储对应class。

注：只有元素集里面有一个有相应的class，就返回true;

* .addClass(name)

添加class。

* .removeClass(name)

删除class。

*.css(name[, value])

只传入第一个参数，返回Je对象中第一个节点对应样式的值。

传入两个参数，设置节点相应样式的值。

注：返回的结果已经过处理，长度类型统一返回px，opacity属性暂未做兼容处理。

* .show()

显示节点，不支持动画。

* .hide()

隐藏节点，不支持动画。

### 事件绑定

* .on(type[, selector, data], fn)

事件绑定。实现bind/live/delegate方法。

bind方法实现：`$("div").on("click", {a:1,b:2}, function(e) {console.log(e.data)});`

delegate方法实现：`$("div").on("click", "a", {a:1,b:2}, function(e) {console.log(e.data)});`

live方法实现：`$(document).on("click", "a", functionA);`

* .off(type[, selector], fn)

事件解绑，实现unbind/die/undelegate方法，不传人函数则解绑响应类型绑定的所有函数。

unbind方法实现：`$("div").off("click", functionA);`

undelegate方法实现：`$("div").on("click", "a");`

die方法实现：`$(document).on("click", "a", functionB);`

* .trigger(type)

触发事件，如click，focus等等（模拟事件触发）

* .click([data, fn])/focus/blur...

简便封装，可绑定可触发。

* .ready()

DOM文档加载完毕执行，不同于onload，不包括加载完图片等。如：

    $(document).ready(function() {
        // Javascript Start
    });

也可以简写：

    $(function() {
        // Javascript Start
    });

### 数据获取

* $.ajax(setting)

异步获取数据。如：

    $.ajax({
        url: "travisup.com",
        type: "POST",
        data: {id:1},
        dataType: "json",
        success: function(data) {
            console.log(data);
        }
    });

* $.getJSON(url[, data, fn])

跨域获取数据。如：

    $.getJSON: function("travisup.com", {id:1}, function(data) {
        console.log(data);
    });
    
* $.getScript(url[, data, fn])

跨域载入Javascript。如：

    $.getScript: function("travisup.com", function() {
        console.log('loaded');
    });
    
### 其他方法

* $.noConflict()

防冲突，释放$的属性，Je的不给。

* $.clone(object)

深度复制对象并返回。

* $.uniq(array)

清除数组内重复数据并返回。

* $.merge(array1, array2)

把第二个数组中数据添加到第一个数组中并返回。

* $.trim(string)

清除字符串中左右的空格并返回。

* $.parseJSON(json)

解析json，兼容ie，必须是一个正确的json对象。

* $.now()

返回当前时间戳。

* $.rand(length)

返回随机数（可指定位数）。

* $.type(obj)

返回传入参数的类型。

* $.isFunction(param)

判断传入的参数是否为函数。

* $.isArray(param)

判断传入的参数是否为数组。

* $.isFunction(param)

判断传入的参数是否为数字（包含只含数字的字符串）。

* $.isScalar(param)

判断传入的参数是否为标量（string/number/boolean）。

* $.isEmptyObject(param)

判断传入的参数是否为空对象，没判断继承的属性。


**查看演示**

* [查看框架演示](http://singod.github.io/jeQuery/)