升级JQuery版本的第三方服务

转载

技术领航博主 2024-08-12 21:30:11

文章标签 升级JQuery版本的第三方服务 jquery javascript 神秘人998 jquery基础 文章分类 jQuery 前端开发

JQuery简介：

jQuery是一个快速、简洁的JavaScript框架，封装了大量的JS函数。
中文API：JQuery中文API
在使用前必须先导入JQuery库，可以在jquery官网下载jquery库下载链接，选择版本，到现在最最新版是3.2.1。
教程：
1、把下载好的jquery库放到项目中，新建一个js文件夹，放在里面

2、在要用的页面导入

我们点进去看下

看得出来，这里面全是写的一些js代码，对js代码进行了封装。

选择器

#id：

根据给定的ID匹配一个元素。
语法：

$(“#id名”)
例子：

//代码
        function testA()
        {
            var div=$("#div1");
            //通过$("#div1")就得到了id为"div1"的对象
            alert(div.text());
            //再用div.text()就可以得到div里面的文本内容
        }
        //body里面的代码
        <div  id="div1">第一个盒子</div>

element：（在这里顺便说下两种循环遍历）

根据给定的元素标签名匹配所有元素。
例子：

var a=$("input");
    //这样就得到了页面中的所有input标签对象，并赋给了a,返回的是一个数组，可以用each()函数遍历
    //第一种each遍历：
        function testB()
        {
            a.each(function(){
                alert($(this).val());
                //this是遍历到某一个input元素时的对象，在调用val()就得到了里面的值。
            });
        }
    //第二种each遍历：
        function testC()
        {
            var input=$("input");  
            $.each(input,function(i,d){
            //这是用$调用的each函数.第一个参数是要遍历的对象数组,第二个是一个回调函数，"i"表示遍历对象数组的下标（从0开始的）,"d"表示遍历到某一个input元素时的对象
                alert("第"+i+"个元素的值为:"+$(d).val());
                if(i==3){
                    $(d).val("傻逼");
                    //当i==3时改变input里面的值
                }

            });
        }

        //body里面的代码
        <form action="">
            <input type="text" name="username" id="div2"/>
            <input type="password" name="pwd"/>
            <input type="text" name="email"/>
            <fieldset>
                <span>十点半</span>
                <input type="text" value="恩恩"/>
            </fieldset>
        </form>

.class:

根据给定的css类名匹配元素。
例子:

$(".myClass");
//这样就找到了所有“class="myClass"”的元素

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
例子：

$("div,span,p.myClass")
//这样就找到了所有的div标签，span标签，class="myClass"的p标签

ancestor descendant

在给定的祖先元素下匹配所有的后代元素( 中间用空格隔开的)
用以匹配元素的选择器，并且它是第一个选择器的后代元素
例子：

$("form input");
//这样就找到了所有form里面的input标签.注意只能找到form标签里面包含的，form外面的input标签是得不到的。

<input name="none000" />//input1
    <form>
        <input name="name" />//input2
        <input name="name1" />//input3
    </form>
//这里的话只能找到input2和input3，找不到input1，想要得到所有的input的话可以用$("input");

parent > child:

在给定的父元素下匹配所有的子元素。
用以匹配元素的选择器，并且它是第一个选择器的子元素。
例子：

$("form>input")
//这里就得到了form标签里面的所有子input标签，注意是子元素，就是说只能有一层包含关系，不能是孙子关系。
    <form action="">
            <input type="text" name="username" />//input1
            <input type="password" name="pwd"/>//input2
            <fieldset>
                <input type="text" value="恩恩"/>//input3
            </fieldset>
        </form>
 //这里只能得到input1和input2，得不到input3，因为input3不是和form直接包含，不是form的子元素。

prev + next

匹配所有紧接在 prev 元素后的 next 元素。
一个有效选择器并且紧接着第一个选择器。
例子：

$("label+input");
    //这里就得到了所有紧跟在label标签后面的input标签元素，注意只得到了input，没有label 
    <form>
        <label>Name:</label>
        <input name="name" />//input1
        <input name="name1" />//input2
          <fieldset>
             <label>Newsletter:</label>
           <input name="newsletter" />//input3
         </fieldset>
    </form>
    //这里得到了input1和input3，并没有得到input2，input2并没有紧跟着label标签。

prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素
一个选择器，并且它作为第一个选择器的同辈
例子：

$("form~input")
//这里得到了form标签后面与form标签同级的input标签。
    <input name="none000" />//input1
    <form>
        <input name="name" />//input2
    </form>
    <input name="none" />//input3
//这里只得到了input3，input1在form标签前面，input2在form标签里面都不是是同级关系，所以只能得到input3.