jquery的常用知识点

首页 > 代码库 > jquery的常用知识点

2024-09-29 14:35:02 219人阅读

一、用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])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        .hide{
            display: none;
        }
        .returnTop{
            height: 30px;
            width: 90px;
            background-color: darkgray;
            position: fixed;
            color: greenyellow;
            bottom: 30px;
            right: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
        .div p{
            height: 150px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 500px;
        }
        .div1{
            background-color: orchid;
            font-size: 5px;
            overflow: auto;
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="div1 div">
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>

     </div>
     <div class="div2 div"></div>
     <div class="div3 div"></div>
     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>

</body>
<script src="jquery.min.js"></script>
<script>
    //监听一个window的滚轮事件
    window.onscroll = function () {
        //当滚轮像素大于200的时候显示返回顶部的标签
        if($(window).scrollTop()>200){
            $(".returnTop").removeClass("hide")
        }else{
            $(".returnTop").addClass("hide")
        }
    }
    //将滚轮像素调整到0就是返回顶部了
    function returnTop() {
        $(window).scrollTop(0)
    }
</script>
</html>

返回顶部

三、事件

页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){})

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
    //  click事件；

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
        //$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个
        //li：$(‘ul‘).append(‘<li>js new li<li>‘)；这个新加的li是不会被绑上click事件的

        //但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加
        //li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)

http://www.cnblogs.com/yuanchenqi/articles/6070667.html

jquery的常用知识点

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > jquery的常用知识点

jquery的常用知识点

一、用jquery寻找元素

二、操作元素

三、事件

看完仍有疑问？有类似问题直接问程序猿