• jQuery的使用

    目录

    jquery对象：

    jquery作为一般函数调用参数:

    jquery事件机制 

    jquery dom操作

    jquery对象：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    8.     <script>
    9.         // 点击按钮将输入在输入框中的值弹框显示
    10.         window.onload = function(){
    11.             var input = document.querySelector('input');
    12.             var btn = document.querySelector('button');
    13.             btn.onclick = function(){
    14.                 alert(input.value)
    15.             }
    16.         }
    17.         $(function(){
    18.             //成为jquery实例：$()   
    19.             $('button:last').click(function(){
    20.                 alert($('input').val())
    21.             })
    22.         })
    23.     script>
    24. head>
    25. <body>
    26.     <input type="text">
    27.     <button>确定(js)button>
    28.     <button>确定(jquery)button>
    29. body>
    30. html>

     浏览器运行结果如下：

    jquery作为一般函数调用参数:

      1.$() 匿名函数  入口函数区别
      2.css选择器字符串 匹配元素 
      3.dom对象 jquery会把dom对象封装为jquery对象
      4.html字符串 表示创建html中元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    8.     <script>
    9.         /**
    10.          * jquery函数被当作一般函数调用 $(params)
    11.          * 1.函数内部参数可以是css选择器字符串 表示匹配元素
    12.          *   $('div') $('.two') $('#three')
    13.          * 2.函数内部参数可以是dom对象 将他封装成jquery对象
    14.          * 3.函数内部参数可以是匿名函数 表示jquery入口函数
    15.          * 4.函数内部可以是html元素字符串 表示创建html元素
    16.         */
    17.        $(function(){
    18.         $('button').click(function(){
    19.             console.log(this,$(this));
    20.             $(this).html('不想被网爆');
    21.             //创建h1标题并追加给body标签
    22.             $('
      sb
      '      ).appendTo('body')
    23.         })
    24.        })
    25.     script>
    26. head>
    27. <body>
    28.     <button>网爆我button>
    29. body>
    30. html>

    浏览器运行结果如下：

     

    jquery事件机制 

      绑定事件：on(function(event){
        event---jquery封装的事件对象 data
      })  bind()  one()一次性事件绑定
      解绑事件：off()  unbind()  
      事件类型：click() blur() focus() mouseenter() mousedown() 
      trigger 模拟事件 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    9.     <script>
    10.         /**
    11.          * 1.给元素绑定事件 click(handler)
    12.          * 2.给元素绑定事件 on(事件类型，实际参数，handler(形式参数){})
    13.         */
    14.         $(function () {
    15.             // //绑定事件
    16.             // $('button').on('click', [1, 2, 3, 4], function (event) {
    17.             //     console.log(event, '事件对象', event.data);
    18.             // });
    19.             // //解绑事件  off解绑事件
    20.             // $('button').off('click');
    21.  
    22.  
    23.             // //绑定事件 bind方法绑定事件
    24.             // $('button').bind('click', 'terry', function (event) {
    25.             //     console.log(event);
    26.             // });
    27.             // $('button').bind('mouseenter', function (event) {
    28.             //     $(this).css({
    29.             //         backgroundColor:'red'
    30.             //     })
    31.             // });
    32.             // //unbind解绑事件
    33.             // $('button').unbind('click');
    34.             // //一次性解绑所有事件 unbind不加参数
    35.             // $('button').unbind();
    36.  
    37.             // // $('button').on('click',function(){
    38.             // //     $(this).html('被点击了')
    39.             // // });
    40.             // //事件代理 给父元素绑定事件  on(事件类型，选择器，实际参数，handler)
    41.             // $('body').on('click','button',function(){
    42.             //     $(event.target).html('被点击了')
    43.             // })
    44.  
    45.             // //一次性事件绑定 one  事件只执行一次
    46.             // $('button').one('click',{name:'larry'},function(event){
    47.             //     console.log(event.data);
    48.             // })
    49.  
    50.             // //模拟事件 trigger
    51.             // $('button').click(function(event,a,b,c){
    52.             //     console.log('我被点击了',event,a,b,c);
    53.             // });
    54.             // $('button').trigger('click',[1,2,3]);
    55.  
    56.             // //聚焦事件 focis
    57.             // $('input').focus(function () {
    58.             //     $(this).css({
    59.             //         backgroundColor: 'red'
    60.             //     })
    61.             // })
    62.             // //失焦事件 blur
    63.             // $('input').blur(function () {
    64.             //     $(this).css({
    65.             //         backgroundColor: 'blue'
    66.             //     })
    67.             // })
    68.  
    69.  
    70.             $('button').mouseenter(function(){
    71.                 $(this).css({
    72.                     backgroundColor:'red'
    73.                 })
    74.             });
    75.             $('button').mouseleave(function(){
    76.                 $(this).css({
    77.                     backgroundColor:'blue'
    78.                 })
    79.             });
    80.             $('button').dblclick(function(){
    81.                 console.log('我被双击了');
    82.             });
    83.         })
    84.     script>
    85. head>
    86.  
    87. <body>
    88.     <input type="text">
    89.     <button>点击我button>
    90.     <button>点击我button>
    91.     <button>点击我button>
    92.     <button>点击我button>
    93.     <button>点击我button>
    94.     <button>点击我button>
    95.     <button>点击我button>
    96.     <button>点击我button>
    97.     <button>点击我button>
    98.     <button>点击我button>
    99.     <button>点击我button>
    100.     <button>点击我button>
    101.     <button>点击我button>
    102. body>
    103.  
    104. html>

    浏览器运行结果如下：

    jquery dom操作

      addClass() 添加类名
      removeClass() 移除类名
      toggleClass() 切换类名 有类名则是移除 没有则是添加
      clone() 深克隆和浅克隆 克隆事件和内容
      attr()
      removeAttr()
      html() 元素的内容 包括文本和标签
      text() 只获取元素的文本内容
      val()  获取输入框值

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    8.     <style>
    9.         .active{
    10.             background-color: pink;
    11.         }
    12.     style>
    13.     <script>
    14.         $(function(){
    15.             //在匹配到的元素后面增加内容 append
    16.             $('div').append('我是新增的内容');
    17.             $('div').append('
      一级标题
      '      );
    18.  
    19.             //appendTo 将前面创建的元素添加给appendTo()中的目标元素
    20.             $('
      段落标签
      '      ).appendTo('body');
    21.             $('div').after('
      块级元素
      '      );
    22.             $('div').before('
      块级元素
      '      );
    23.             $('button').click(function(){
    24.                 alert('我被点击了')
    25.             });
    26.             //clone 克隆节点  true深克隆(内容事件都可克隆) false浅克隆(事件没有克隆)
    27.             $('button').clone(true).appendTo('body');
    28.  
    29.             // //添加一个类名 addClass
    30.             // $('#one').addClass('active');
    31.             // //移除一个类名 removeClass
    32.             // $('#one').removeClass('two');
    33.             //切换类名
    34.             // $('div').click(function(){
    35.             //     //toggleClass 切换类名 如果默认有类名则是移除，如果没有则是添加
    36.             //     $(this).toggleClass('active');
    37.             // })
    38.             console.log($('body').text(),'元素文本内容');
    39.             console.log($('body').html(),'识别代码片段');
    40.         })
    41.     script>
    42. head>
    43. <body>
    44.     <button>点击我button>
    45.     <div id="one" class="two" title="我是div的title">我是块级元素div>
    46. body>
    47. html>

    浏览器运行结果如下：

     

  • 相关阅读:
    软件测试架构师的工作日常
    Raft分布式一致性协议基本过程
    5.2 空表实验
    严选算法模型质量保障
    【UCIe】UCIe Sideband 介绍
    蓝桥杯嵌入式第二篇配置按键
    CSDN云IDE初次测评体验
    【学习笔记之数据结构】顺序表
    k8s之client-go和ctrl的各种k8s client
    Java 集合之 Set 接口
  • 原文地址：https://blog.csdn.net/l12345666777/article/details/134733671