JQuery学习笔记(1)简单介绍 (2选择器)(3过滤器)

本文详细介绍了JQuery的基本概念,包括$符号的作用、JQuery对象与DOM对象的转换方式,以及各种选择器和过滤器的使用方法,如eq(), hasClass(), filter(), has(), is(), map(), not(), slice()等,还深入解析了查找元素的方法,如children(), contents(), find(), parents(), closest(), prev(), next()等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1)简单介绍

测试:

在 JQuery中,$ 是JQuery的别名 $()等效于 JQuery ()  选择函数

JQuery $(document).ready() 表示匹配文档中的document 节点,然后为该节点绑定ready时间处理函数。

类似于 Js中的window.onload= function(){};(不过JQuery的ready事件要优于onload事件被激活

简化为$()

1.把JQuery对象转换成DOM对象

JQuery对象不能直接使用DOM对象

相互转换例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../jquery-3.3.1.js" ></script>
        <!--<script type="text/javascript">
            $(function(){
                var $li =$("li");
                var li=$li[4];//可以将他转换成 $li.get(4);
                alert(li.innerHTML);
            })
        </script>-->
    </head>
    <body>
        <ul>
            <li>我去炸学校</li>
            <li>老师不知道</li>
            <li>线一拉</li>
            <li>我就跑</li>
            <li>回头看见学校不见了</li>
        </ul>
        
        <script type="text/javascript">
             var li=document.getElementsByTagName("li");
             var $li=$(li[0]);//花钱好办事
             alert($li.html());
        </script>
    </body>
</html>

 

(2选择器) 基本同CSS

  (3)过滤器

参考 demo:

 <p><span class="red">我去炸学校</span></p>

 <p><span>老师不</span><span>知道</span></p>

 <p>线一拉</p><p>我就跑</p><p>回头看见学校没见了</p>

  1. 下标过滤       $("div"). eq(0) 选择第几个标签元素

   2. 类过滤     $("div").hasClass("") 选择类名标签 

   3.表达式过滤 $("div"). filter(".red")//表示选择标签对应的哪个类(可以添加多个 类名) $("div"). filter(".red,.blue")

             其中可以通过 false 和 true 来表示        

             $(function(){

         $("p").filter(function(index){       return   $("span",this).length==2;              });

})  上 诉代码 表示 选择 p标签JQuery对象,过滤条件为包含了俩个span标签

这个$("span",this)可以看出 $() 默认是从document中寻找,后面加入某个 jQuery对象表示从该对象中寻找

4. has()是一种 轻便的过滤方法,用法没有filter复杂 

$(function(){

     $("p").has("span.red").css("background-color","red");

}) 

选择p标签对象has()过滤条件有span标签,标签类名为 red

5.判断 is() 不直接过滤元素  作为条件进行删改

 6.映射 map(callback) 方法能够吧JQuery对象 中每一个元素映射到一个新的jQuery对象中,用法如下 

 callback表示回调参数 ,将在 每个元素上调用,根据每次回调函数的返回值新建一个JQuery对象。

返回的JQuery对象可以包含元素,也可以是其他值,主要根据回调函数返回值确定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>map映射过滤</title>
        <script type="text/javascript" src="../jquery-3.3.1.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#submit").click(function(){
                    $("p").html("<h2>提交信息</h2>").append($("input").map(function(){
                        return  $(this).val();
                    }).get().join("、"));
                    return false;
                })
            })
        </script>
    </head>
    <body>
        <form>
            用户名:<input name="userName" type="text" />
            密    码:<input name="password" type="password">
            <button id="submit">提交</button>
        </form>
        <p></p>
    </body>
</html>

分析:$("input")找到input标签对象数组集合 通过 map()方法把所有的 匹配的input元素的value属性值映射为另一个新JQuery

对象,然后通过get()方法得到这些 JQuery对象的数组,join(“丶”)方法将数组连接成字符串。   最后通过了 JQuery的append ()方法加入字符串。

7.清除

not()方法能够 从jQuery对象中删除符合条件的元素 ,并返回清除后的JQuery对象。

8.截取

slice(start,[end]) slice(2,3)截取第三个和第四个对象

查找:

9.

向下查找

(1) $("#menu").children().css("","");  childred(".home")  

   children()方法中没有参数表示查找所有的子元素 ,含参数则根据参数过滤 (只能查找子元素)

(2)contents()不仅仅能获得子元素 ,还能获得文本几点和注释节点 

(3)find()方法能够查找又有后代元素(孙。。。)

向上查找 

(4)parents(expr)方法能够找到所有匹配的元素的祖先元素 ,但是如果存在相同 重复的祖先元素,仅仅记录一次 

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../jquery-3.3.1.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("img").parents().css({"border":"solid 1px red","margin":"10px"});
                alert($("img").parents().length);
            })
        </script>
    </head>
    <body>
    <div>
        <span><img  src="../img/1sch5r3r.jpg"/></span>
        <img src="../img/1sch5r3r.jpg" />
    </div>
    </body>
</html>

(5)parentsUtil(seletor) 查找对应的参数

(6)offsetParent()该方法在能查找当前元素最近定位包含框 (没有参数)

  (7) closet(expr,[context])该方法可以查找指定的父元素 。他主要为时间的处理而设计,对处理时间委派非常有用。

  (8)prev([expr])向前查找最近的元素同辈元素 (9)pervAll([expr])查找前面所有的同辈元素

(10)next([expr])==>nextSibling()属性功能相同(11) nextAll([expr])查找后面所有的同辈元素

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值