jquery常用方法-02

过滤元素：

注意过滤的结果仍是伪数组！
eq(index|-index)：获取第N个元素。这个元素的位置是从0算起，如果是负数，则从集合中的最后一个元素开始倒数。
first()：获取第一个元素。
last()：获取最后一个元素。

例：
$('li').eq(0).css({background:'red'});
$('li').first().css({background:'red'});
$('li').last().css({background:'red'});
//过滤之后的结果仍然伪数组，所以可以继续使用jq中的方法

children([expr])：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。只考虑子元素而不考虑所有后代元素。
例：

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
//查找DIV中的每个子元素。
$("div").children()
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
//在每个div中查找 .selected 的类。
$("div").children(".selected")

find(expr)：搜索所有与指定表达式匹配的后代元素。

<p><span>Hello</span>, how are you?</p>
//从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
$("p").find("span")

parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合。

<div><p>Hello</p><p>Hello</p></div>

//查找段落的父元素中每个类名为selected的父元素。
$("p").parent()

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
//查找段落的父元素中每个类名为selected的父元素。
$("p").parent(".selected")

next([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
//找到每个段落的后面紧邻的同辈元素。
$("p").next()

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
//找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
$("p").next(".selected")

nextAll([expr])：查找当前元素之后所有的同辈元素。

<div></div><div></div><div></div><div></div>
//给第一个div之后的所有元素加个类
$("div:first").nextAll().addClass("after");

prev([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll([expr])：查找当前元素之前所有的同辈元素。
siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选**

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
//找到每个div的所有同辈元素。
$("div").siblings()

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
//找到每个div的所有同辈元素中带有类名为selected的元素。
$("div").siblings(".selected")

end（）
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态

<p><span>Hello</span>,how are you?</p>
//选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素
$("p").find("span").end()

遍历

each(callback)：以每一个匹配的元素作为上下文来执行一个函数。回调函数有两个参数，第一个参数代表索引，第二个参数代表当前遍历到的DOM对象**

$('#box li').each(function(index,val){
        console.log(index,val)
        //index 是下标，val是下标对应的原生dom元素
})

index([selector|element])：搜索匹配的元素，并返回相应元素的索引值，从0开始计数。如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。如果不传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

DOM操作

创建

var  $div = $(‘<div></div>’)

内部插入操作：
append(content|)：向每个匹配的元素内部追加内容。

$("p").append("<b>Hello</b>");

prepend(content)：向每个匹配的元素内部前置内容。

$("p").prepend("<b>Hello</b>");

appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中

<div></div><div></div>
//新建段落追加d到每一个div中
$("<p/>").appendTo("div")

外部插入操作：
after(content)：在每个匹配的元素之后插入内容。

$("p").after("<b>Hello</b>");
before(content)：在每个匹配的元素之前插入内容。
$("p").before("<b>Hello</b>");

替换操作：
replaceWith(content)：将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").replaceWith("<b>Paragraph. </b>");
//把所有的段落标记替换成加粗的标记。

删除操作：
empty()：删除匹配的元素集合中所有的子节点。

<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty();

remove([expr])：从DOM中删除所有匹配的元素。

$("p").remove();
//从DOM中把带有hello类的段落删除
$("p").remove(".hello");

复制操作：
clone(Even])：克隆匹配的DOM元素并且选中这些克隆的副本。
even：一个布尔值（true 或者 false）指示事件处理函数是否会被复制

<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p");

事件

页面载入事件：

ready(fn)：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.onload事件注册事件的替代方法。

绑定事件：
bind(type,fn)：为每个匹配元素的特定事件绑定事件处理函数。
unbind(type,[fn]])：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。
hover([over,]out)：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
click(fn)：触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

注：其他事件方法使用方式一样。例如：mouseover、mouseout、dblclick、change、blur、focus、keydown、keyup、keypress、mousedown、mouseup、mousemove、mouseenter、mouseleave、resize、scroll、select、submit、unload等。

on(event,[selector],fn)：在选择元素上绑定一个事件的事件处理函数。

//直接给p绑定事件
$("p").on("click", function(){
    alert( $(this).text() );
});
//如果第二个参数传入一个选择器，就是监听父元素中li的点击事件，相当于 事件委托！
$('ul').on('click','li',function(){
                console.log(11)
  })
off(event,[selector],[fn])：在选择元素上移除一个事件的事件处理函数

Ajax

jQuery.ajax(settings)：通过HTTP请求加载远程数据，返回其创建的XHR对象。

Settings:
async：Boolean类型。默认为true（异步）。
contentType：string类型。默认为application/x-www-form-urlencoded，发送信息至服务器时内容编码类型。
timeout：设置请求超时时间（毫秒）。
type：请求方式（GET或POST），默认为GET。
url：默认当前页地址，发送请求的地址。
data：object/string类型。发送到服务器的数据。

error：在请求出错时调用。传入XHR对象，描述错误类型的字符串
success：当请求成功之后调用，传入返回后的数据，以及包含成功代码的字符串。

Get请求

  var data = {lastCursor:7544,pageSize:10}
        var url = 'https://api.readhub.me/topic'
        $.ajax({
            url:url,
            type:'get',
            data:data ,//设置参数
            success:function (res) {
         
            
                console.log(res)
            },
            error:function (error) {
                console.log(error);
            }
        });;

post 请求

var data = {lastCursor:7544,pageSize:10}
            var url = 'https://api.readhub.me/topic'
            $.ajax({
                url:url,
                type:'post',
                data:data ,//设置参数
                success:function (res) {
                    console.log(res);
                },
                error:function (error) {
                    console.log(error);
                }
            });

jsonp请求

var url1 = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=n'
    //jsonp 接口 必须 两个字段  dataType:'jsonp'， jsonp:cb（回调函数字段）
    //jq会自动生成回调函数  
    //&cb=jQuery1102045621865612995216_1498111113677
                $.ajax({
                    url:url1,
                    dataType:'jsonp',
                    jsonp:'cb',
                    success:function (res) {
                        console.log(res)
                    },
                    error:function (error) {
                        console.log(error)
                    }
                })