返回主页

var jQuery = function(selector, context) {
    return new jQuery.fn.init(selector, context);
};

selector -> 选择器的类型 一般都是string类型
context -> 获取的上下文  第二个参数一般不传，不传默认为document
$("#div1")
$(".box")
$("#div1 span") -> $("span", div1)
console.log($("#div1 span:first"))

console. log($( #div1"))

[jQuery对象的私有的属性]

$("#div1")[0] -> div1这个元素对象
S(#div1").selector -> "#div1"
S(#div1").context -> document
("#div1").length-)1 获取元素的个数

[jQuery对象的公有的属性]
jQuery.prototype

var $oDiv =$("#div1")
var oDiv = document.getElementById("div1")
Js->jQuery: $(oDiv).addClass()
jQuery->Js: $oDiv[o]/ $oDiv.get(0)

$(document).ready(function() {
    //HTML结构加载完成就执行这里的代码
});
$(function() {});

each

$("selector").each( function(){})遍历获取的这些元素 jQuery.prototype
$.each(ary)遍历数组中的每一项 jQuery.each

$.extend()->把 jQuery当做一个对象,给它扩展属性->完善类库

$.fn.extend()->在 jQuery的原型上扩展属性和方法->编写 jQuery插件

$.extend({
    a: function(){

    }
})
$.a()

$.fn.extend({
    b: function(){

    }
})
$().b()

例如执行： $({}).bind('cust', function(){});
结果：  TypeError: Object has no method 'addEventListener'
解决办法是创建一个脱离文档流的节点作为事件对象：
例如： $('').bind('cust', function(){});

例如执行：$('[data-userid=123123123]')
结果：Error: SyntaxError: DOM Exception 12
解决办法： $('[data-userid="123123123]"') or \$("[data-userid='123123123']")

2-1.zepto 的选择器没有办法选出 \$("div[name!='abc']") 的元素
2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性

应该使用$('option').not(function(){ return !this.selected })
比如：jq:$this.find('option[selected]').attr('data-v') * 1
zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1
但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性
参考网址：https://github.com/madrobby/zepto/issues/503

2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法

Zepto.js: 由盒模型（ box-sizing ）决定
jQery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）解决方式就是使用 .css('width') 而不是 .width() 。

3-1.边框三角形宽高的获取
假设用下面的 HTML 和 CSS 画了一个小三角形：

<div class="caret"></div>.caret {
    width: 0;
    height: 0;
    border-width: 0 20px 20px;
    border-color: transparent transparent blue;
    border-style: none dotted solid;
}

jQuery 使用 .width() 和 .css('width') 都返回 ，高度也一样；
Zepto 使用 .width() 返回 ，使用 .css('width') 返回 0px 。
所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。

3-2.offset()

Zepto.js: 返回 top 、 left 、 width 、 height
jQuery: 返回 width 、 height

3-3.隐藏元素

Zepto.js: 无法获取宽高；
jQuery: 可以获取。

(function($) {
    $(function() {
        var $list = $("<ul><li>jQuery 插入</li></ul>", {
            id: "insert-by-jquery"
        });
        $list.appendTo($("body"));
    });
})(window.jQuery);

Zepto(function($) {
    var $list = $("<ul><li>Zepto 插入</li></ul>", {
        id: "insert-by-zepto"
    });
    $list.appendTo($("body"));
});

(function($) {
    $(function() {
        $script = $("<script />", {
            src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js",
            id: "ui-jquery"
        });

        $script.appendTo($("body"));

        $script.on("load", function() {
            console.log("jQ script loaded");
        });
    });
})(window.jQuery);

Zepto(function($) {
    $script = $("<script />", {
        src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js",
        id: "ui-zepto"
    });

    $script.appendTo($("body"));

    $script.on("load", function() {
        console.log("zepto script loaded");
    });
});

document.addEventListener(
    "touchmove",
    function(event) {
        event.preventDefault();
    },
    false
);

 XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 都构建于 XPath 表达之上。

 因此，对 XPath 的理解是很多高级 XML 应用的基础。

<ul id="ul">
    <li>
        list1
        <ul>
            <li>
                list1-1
            </li>
            <li>
                list1-2
            </li>
        </ul>
    </li>
    <li>
        list2
        <ul>
            <li>
                list2-1
            </li>
            <li>
                list2-2
            </li>
        </ul>
    </li>
    <li>
        list3
        <ul>
            <li>
                list3-1
            </li>
            <li>
                list3-2
            </li>
        </ul>
    </li>
</ul>

console.log($("#ul").find("li").length); // 9
console.log($("#ul").children("li").length); // 3

$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。

而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

获得a标签的onclick属性: $("a").attr("onclick")
删除onclick属性：$("a").removeAttr("onclick");
设置onclick属性：$("a").attr("onclick","test();");

$(selector).addClass(class)：为每个匹配的元素添加指定的类名
$(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值；
$(selector).toggleClass(class)：如果存在（不存在）就删除（添加）一个类
$(selector).removeAttr(class);删除class这个属性；

(1)、基本选择器：#id，class,element,*;
(2)、层次选择器：parent > child，prev + next ，prev ~ siblings
(3)、基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
(4)、内容过滤器选择器： :contains ，:empty ，:has ，:parent
(5)、可见性过滤器选择器：:hidden ，:visible
(6)、属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
(7)、子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child
(8)、表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
(9)、表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

delegate()会在以下两个情况下使用到：
 1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：
$("ul").delegate("li", "click", function(){ $(this).hide(); });
 2、当元素在当前页面中不可用时，可以使用delegate()

< script type = "text/javascript"
language = "javascript" >
    $(document).ready(function() {
        window.history.forward(1);
        //OR window.history.forward(-1);
    }); <
/script>

相同点：都是异步请求的方式来获取服务端的数据；
异同点：
1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。