jquery的常用知识点

Posted 小强灰灰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery的常用知识点相关的知识，希望对你有一定的参考价值。

一、用jquery寻找元素

1、选择器

基本选择器：

$("*")  
$("#id")     用id匹配
$(".class")   用class名匹配
$("element")  用标签名匹配
$(".class,p,div")  组合匹配

 

层级选择器：

$(".outer div")  
$(".outer>div")  
$(".outer+div")  
$(".outer~div")

 

基本筛选器：

$("li:first")  
$("li:eq(2)")  
$("li:even")
$("li:gt(1)")

 

属性选择器：

$(\'[id="div1"]\')   
$(\'["new_name="zhang"][id]\')

 

表单选择器：

$("[type=\'text\']")----->$(":text")  

其中用的最频繁的就是基本选择器和层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab功能</title>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li new_name="c1" class="current" onclick="tab(this);">菜单一</li>
              <li new_name="c2" onclick="tab(this);">菜单二</li>
              <li new_name="c3" onclick="tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>

      </div>
</body>
<script>
           function tab(self){
               var index=$(self).attr("new_name");
               $("#"+index).removeClass("hide").siblings().addClass("hide");
               $(self).addClass("current").siblings().removeClass("current");

           }
    </script>
</html>
tab标签切换例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>

    <style>
          .menu{
              height: 500px;
              width: 30%;
              background-color: gainsboro;
              float: left;
          }
          .content{
              height: 500px;
              width: 70%;
              background-color: rebeccapurple;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: #425a66;
             color: forestgreen;}


         .hide{
             display: none;
         }


    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this);">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>

</body>
<script>
          function show(self){
              $(self).next().removeClass("hide");
              $(self).parent().siblings().children(".con").addClass("hide");

          }
    </script>
</html>
菜单折叠例子

2、筛选器

过滤筛选器：

$("li").eq(2)  索引为2的li标签
$("li").first()  
$("ul li").hasclass("test")  返回布尔值，判断是否有class属性

查找选择器：

$("div").children(".test")   #查找class为test的子标签
$("div").find(".test")   查找节点下的所有class为test的标签
                               
$(".test").next()     #查找下一个兄弟标签
$(".test").nextAll()   
$(".test").nextUntil() 
                           
$("div").prev()   #查找上一个兄弟标签
$("div").prevAll()  
$("div").prevUntil()   
                        
$(".test").parent()   查找父标签
$(".test").parents()   查找叔父标签
$(".test").parentUntil() 

$("div").siblings()    #查找所有兄弟标签

 二、操作元素

1、属性操作

--------------------------属性
$("").attr();    查找属性（可查自定义属性）
$("").removeAttr(); 删除属性
$("").prop();   查找属性（只能查固有的属性）
$("").removeProp(); 删除固有属性
--------------------------CSS类
$("").addClass(class|fn) 增加class样式名
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])  #查找子节点的html代码
$("").text([val|fn])    查找文本值
$("").val([val|fn|arr]) 查找value值
---------------------------
$("").css("color","red")   #添加修改css样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>

</head>
<body>

     <button onclick="selectall();">全选</button>
     <button onclick="cancel();">取消</button>
     <button onclick="reverse();">反选</button>

     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>
</body>
   <script>
         function selectall(){
             $("table :checkbox").prop("checked",true)
         }
         function cancel(){
             $("table :checkbox").prop("checked",false)
         }
         function reverse(){
             $("table :checkbox").each(function(){
                 $(this).prop("checked",!$(this).prop("checked"));
             });
         }

    </script>
</html>
全选反选例子

2、文档处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
            <div class="outer">
                <div class="item">
                        <input type="button" value="+" onclick="add(this);">
                        <input type="text">
                </div>
            </div>

<script src="jquery.min.js"></script>
<script>
        //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?
        function add(self){
            // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
             var $clone_obj=$(self).parent().clone();
             $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
             $(self).parent().parent().append($clone_obj);
        }
       function removed(self){

           $(self).parent().remove()

       }

</script>
</body>
</html>
赋值样式条

3、css操作

CSS
        $("").css(name|pro|[,val|fn])
    位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
    尺寸
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])