jQuery一些基本内容(二)

2019-12-01

过滤元素

eq(index|-index):参数可以为正值也可以为负值，获取第 N 个元素，这个元素的位置从 0 开始，如果是负数，则从集合中的最后一个元素开始倒数，参数为-1 就是最后一个元素，-2 就是倒数第二个元素。
first():获取第一个元素。
last():获取最后一个元素。

$('ul li).eq(-2).css({background:'red'});
$('ul li).first().css({background:'red'});
$('ul li).last().css({background:'red'});
//过滤之后得出的仍然是个伪数组，所以可以继续调用jq中的方法

children([expr]):不传参数是匹配所有子元素，传入参数是匹配其子元素中符合条件的所有子元素。

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

//在每个div中查找class名为selected的元素
$('div').children('.selected')

parent([expr]):取得一个包含着所有匹配元素的位以父元素的元素集合（匹配父元素，返回的是伪数组）(直接父元素)

<div><p>Hello</p></div><div class="selected"><p>Hello</p></div>
//查询p元素的直接父元素
$('p').parent()

//查询p元素的直接父元素中带有这个class名的元素
$('p').parent('.selected')

find(expr):搜索所有与指定表达式匹配的后代元素，相当于$(‘ul li’)

1
2
3

<p><span>Hello</span>,how are you?</p>
//查找所有p元素下的span元素，与$('p span')相同
$('p').find('span')

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

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

//找到每个段落的后面**紧邻**的同辈元素中类名为selected的元素
$('p').next('selected')

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

<div></div><div></div><div></div>
//给第一个div元素之后的所有同辈元素都添加一个class名
$('div:first').nextAll().addClass('after');

<div></div><div class="after"></div><div class="after"></div>

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():回到最近的一个“破坏性操作之前”。破坏性操作即为有变化。

1
2
3

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

遍历

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

1
2
3

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

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

<ul>
    <li>item1</li>
    <li id="one">item2</li>
    <li class="one">item3</li>
    <li class="selected">item4</li>
</ul>


$('li').click(function name(params) {
    console.log($(this).index());
    //此处的index拿到的是被点击的该元素的同辈元素的下标

    console.log($(this).index('li')); //与上面的效果相同

})

console.log($('li').index(document.getElementsByClassName('selected')[0])); //返回的是这个Dom对象在原先的li集合中的索引位置

console.log($('li').index($('#one'))); //返回的是这个jQuery对象在li集合中的下标

console.log($('#one').index('li')); // 传递的是一个选择器，返回id为one的jQuery对象在所有li中的索引位置

console.log($('.selected').index()); // 不传递参数，返回的是这个元素在同辈元素中的索引位置

DOM 操作

创建

1	$('<div></div>')

内部插入操作

append(content)：向每个匹配的元素内部追加内容。

1 2	$("p").append("<b>Hello</b>"); //头部添加

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

1 2	$("p").prepend("<b>Hello</b>"); //尾部添加

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

1
2
3

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

外部插入操作

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

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

before(content)：在每个匹配的元素之前插入内容。

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

替换操作

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

1 2	$("p").replaceWith("<h2>888</h2>"); //把所有的段落标记替换成标题。

删除操作

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

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

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

1
2
3

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

复制操作

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

1 2	<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 url = 'https://api.readhub.me/topic?lastCursor=7544&pageSize=10'
$.ajax({
    url:url,
    type:'get',
    success:function (res) {

        console.log(res)
        },
        error:function (error) {
            console.log(error);
                }
    })

Get 请求 2

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)
                }
            })

快捷请求函数

$.getJSON(url, [data], [callback])：通过 HTTP GET 请求获取 JSON 数据。

var data = {lastCursor:7544,pageSize:10}
       var url = 'https://api.readhub.me/topic'
        $.getJSON(url,data,function (res) {
            console.log(res);
        })

也可以通过使用 JSONP 形式的回调函数来加载其他网站的数据。如：”myulr?cb=?”，jQuery 会自动替换 ? 为正确的函数名，以执行回调函数。

//jsonp 请求 ，注意cb=？，？号，jq会自动生成回调函数
        $.getJSON('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=n&cb=?',function (res) {
            console.log(res,'jsonp');
        })

jQuery 插件参考网址

jQuery 之家http://www.htmleaf.com/
jQuery 插件库https://www.jq22.com/

本文作者：人模人样的搬砖老段
本文链接：jQuery 的一些基本内容（二）
如有错误，请及时评论或者知乎私信或者 B 站私信哦~