JQuery基础_01

• JQuery简介：
  
  • jQuery是一个快速、简洁的JavaScript框架，封装了大量的JS函数。
  • 学习链接:w3schoolJQuery教程
  • 中文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.

• 总结：

  • 以“，”隔开的选择器:匹配逗号隔开的所有选择器。
  • 以空格隔开的选择器：在给定的祖先元素下匹配所有的后代元素。
  • 以“>”符号连接的选择器:在给定的祖先元素下匹配儿子元素。
  • 以“+”连接的选择器:匹配所有紧接在给定元素后的下一个元素。
  • 以“~”连接的选择器：匹配给定元素后面的兄弟元素。

还有很简单选择器,就不一一列举了 大家可以查相应的API：
1、jquery选择器1
2、jquery选择器2