jQuery基础学习(1)(标签选择器，事件)_#标签选择器点击事件-CSDN博客

本文链接：https://blog.csdn.net/zww1984774346/article/details/51775471

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供 companion UI（用户界面）和插件。

jQuery 元素选择器

$("p") 选取 <p>元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery css选择器

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

jQuery事件

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
$(selector).mouseenter(function)

a.改变标签的内容

method1：

<script>
   //method1
   function pclicka(){
   var p = document.getElementById("pida");
      p.innerHTML = "p的内容被改变了";
   }
</script>
<p id="pida" onclick="pclicka()">aaa</p>

method2：

<script src="jquery.min.js"></script>
<script>

   //method2
   function pclickb(){
       $("#pidb").text("内容被改变了");
   }
</script>

<p id="pidb" onclick="pclickb()">bbb</p>

method3:

//selector.js

$(document).ready(function(){
   $("#pidc").click(function(){
       $(this).text("pc内容被改变了");
   });
});

<script src="jquery.min.js"></script> 
<script src="js/selector.js"></script>

<p id="pidc">ccc</p>

完整例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script src="js/selector.js"></script>
    <script>
        //method1
        function pclicka(){
            var p = document.getElementById("pida");
            p.innerHTML = "p的内容被改变了";
        }

        //method2
        function pclickb(){
            $("#pidb").text("内容被改变了");
        }

    </script>
</head>
<body>
<p id="pida" onclick="pclicka()">aaa</p>
<p id="pidb" onclick="pclickb()">bbb</p>
<p id="pidc">ccc</p>
</body>
</html>

b. jQuery事件

$(document).ready(function(){
    //单击事件
   $("button").click(function(){
       //设置隐藏
       $(this).hide();
   });

    //双事件
    $("button").dblclick(function(){
        //设置隐藏
        $(this).hide();
    });
});

 //鼠标移动到上面
    $("button").mouseenter(function(){
        $(this).hide();
    });
    //鼠标离开
    $("button").mouseleave(function(){
        $(this).show();
    });

bind(事件绑定)

bind 绑定事件
ubind 解除绑定事件
unbind（’a’）解除所有绑定的a事件，unbind（’a’，’b’）解除绑定a中的b事件

<script>
      $(document).ready(function(){
          $('#p1').bind('click',click1);
          $('#p1').bind('click',click2);
          $('#p1').unbind('click',click1);
      });

      function click1(){
          alert('click1');
      }
      function click2(){
          alert('click2');
      }
  </script>

在jQuery1.7后可以使用on 代替bind,off代替unbind

<script>
      $(document).ready(function(){
          $('#p1').on('click',click1);
          $('#p1').on('click',click2);
          $('#p1').off('click',click1);
      });

      function click1(){
          alert('click1');
      }
      function click2(){
          alert('click2');
      }
  </script>

<3>自定义事件

<script>
    var clickBtn;
    $(document).ready(function(){
       clickBtn = $('#btn1');
       clickBtn.click(function(){
           var e = jQuery.Event('myEvent');
           clickBtn.trigger(e);
       });
        clickBtn.bind('myEvent',function(){
            alert('dddd');
        });
    });
</script>