初识jQuery

最新推荐文章于 2022-05-02 11:15:12 发布

梵谷的忧伤

最新推荐文章于 2022-05-02 11:15:12 发布

阅读量633

点赞数

分类专栏： JAVA开发路线文章标签： java

本文链接：https://blog.csdn.net/qq_57027679/article/details/123682300

版权

JAVA开发路线专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的基本用法，包括文档就绪事件、选择器、事件处理、动画效果、CSS操作、元素尺寸获取和遍历。通过实例演示了如何使用jQuery来控制HTML元素的显示、隐藏、淡入淡出以及样式调整。

摘要由CSDN通过智能技术生成

## jQuery

1. 文档就绪事件

   ```javascript
   //为了防止文档在完全加载之前就运行jQuery代码,需要将jQuery代码都放入一个doucument ready函数中
   $(document).ready(function(){
       ...
   });
   //或者写成
   $(function(){
      ... 
   });
   ```

   

2.  jQuery基础选择器

    ```javascript
    //jQuery选择器允许您对HTML元素组或者单个元素进行操作,基于元素的id,类,类型属性,属性值等查找或者选择HTML元素,它基于已经存在的CSS选择器,除此之外它还有一些自定义的选择器
    <html>
      <head>
        <script type="text/javascript" src="D:\jQuery\jQuery.js"></script>
        <script type="text/javascript">
          $(function () {
            $("p").hide(); //隐藏所有<p>元素
            $("#p1").hide(); //#id选择器
            $(".test").hide(); //.class选择器
          });
        </script>
      </head>
      <body>
        <p id="p1" class="test">你好,陌生人</p>
        <p id="p2" class="test">床前明月光</p>
        <p id="p3" class="test">疑是地上霜</p>
        <p id="p4" class="test">接天莲叶无穷碧</p>
        <p id="p5">映日荷花别样红</p>
      </body>
    </html>
    //以下是一些比较常见的选择器
    ```

    ![QQ图片20220322082234](QQ%E5%9B%BE%E7%89%8720220322082234.png)

3.  jQuery事件

    ```javascript
    //在jQuery中,大多数DOM事件都有一个等效的jQuery方法
    $(function () {
        $("#p1").click(function () {
            $(this).hide();
        });
    });
    //还有许多事件
    ```

    | 鼠标事件   | 键盘事件 | 表单事件 | 文档/窗口事件 |
    | :--------- | :------- | :------- | :------------ |
    | click      | keypress | submit   | load          |
    | dblclick   | keydown  | change   | resize        |
    | mouseenter | keyup    | focus    | scroll        |
    | mouseleave |          | blur     | unload        |

4.  ```javascript
    <html>
        <head>
        <script type="text/javascript" src="D:\jQuery\jQuery.js"></script>
    <script type="text/javascript">
        $(function () {
        $("#button1").click(function () {
            $(".test").hide(1000); //可以在hide()函数指定速度
        });
        $("#button2").click(function () {
            $(".test").show(1000);
        });
        $("#button3").click(function () {
            $(".test").toggle("slow"); //可以使用toggle函数来显示或者隐藏
        });
    
        $("#button4").click(function () {
            $(".test").fadeIn("slow"); //fadein用于淡入已经隐藏的元素
        });
    
        $("#button5").click(function () {
            $(".test").fadeOut("fast"); //淡出已经出现的元素
        });
    
        $("#button6").click(function () {
            $(".test").fadeToggle(1000); //切换淡入淡出效果
        });
        $("#button7").click(function () {
            $(".test").fadeTo("slow", 0.5); //将元素透明度设置在0到1之间
        });
        $("#button8").click(function () {
            $(".test").slideDown(); //滑入
        });
        $("#button9").click(function () {
            $(".test").slideUp("slow"); //滑出
        });
        $("#button10").click(function () {
            $(".test").slideToggle();
        });
        $("#myid").click(function () {
            $(".test").animate(
                {
                    height: "+=10px",
                    fontSize: "+=1em",
                },
                "slow"
            );
            $("#P1").animate({
                right: "+=100px",
            });
        });
    
        $("#stop").click(function () {
            $(".class").stop(); //停止动画
        });
        $("#callback").click(function () {
            $(".test").hide(function () {
                alert("回调函数调用了");
            }); //回调函数会在效果完全实现后实现
        });
    
        $("#connect").click(function () {
            $(".test").css("color", "red").slideUp(2000).slideDown(2000); //方法连接
        });
        // $("#html").click(function () {
        //   alert($("#p2").html()); //返回所选元素的内容,包括标记
        // });
        // $("#text").click(function () {
        //   alert($("#p2").text()); //返回文本内容
        // });
        // $("#val").click(function () {
        //   alert($("#input").val()); //获取键盘输入的对象
        // });
        // $("#attr").click(function () {
        //   alert($("#baidu").attr("herf")); //获得链接中herf属性的值
        // });
        // $("#html").click(function () {
        //   $("#p2").html("你好啊,我连标记也可以设置");
        // });
        // $("#text").click(function () {
        //   $("#p2").text("我只可以设置内容");
        // });
        // $("#val").click(function () {
        //   $("#input").val("我变了");//改变文本框里面的内容
        // });
        // $("#attr").click(function () {
        //   $("#baidu").attr("herf", "www.nihao.com");//设置链接的属性
        //   alert($("#baidu").attr("herf"));
        // });
        $("#val").click(function () {
            $("p").append("Some prepared"); //插入
        });
        //同样,after和before方法可以插入在元素的前/后
        //remove方法删除被选元素以及其子元素,empty删除被选元素的子元素
    });
    </script>
    </head>
    <body>
        <div id="p1" class="test" style="position: absolute">你好,陌生人</div>
    <br />
            <p id="p2" class="test">床前明月光</p>
    <p id="p3" class="test">疑是地上霜</p>
    <p id="p4" class="test">接天莲叶无穷碧</p>
    <p id="p5" class="test">映日荷花别样红</p>
    <br />
        <a herf="www.baidu.com" id="baidu">baidu</a>
    <br />
            Name:<input id="input" type="text" />
    
                <button id="button1">隐藏</button>
    <button id="button2">显示</button>
    <button id="button3">隐藏/显示</button>
    <button id="button4">淡入</button>
    <button id="button5">淡出</button>
    <button id="button6">淡入/淡出</button>
    <button id="button7">透明度</button>
    <button id="button8">滑入</button>
    <button id="button9">滑出</button>
    <button id="button10">滑入/滑出</button>
    <button id="myid">我的传奇动画</button>
    <button id="stop">停止动画</button>
    <button id="callback">回调函数</button>
    <button id="connect">方法链接</button>
    <button id="text">text</button>
    <button id="html">html</button>
    <button id="val">val</button>
    <button id="attr">attr</button>
    </body>
    </html>
     
    ```

    

5.  操纵CSS

    ```javascript
    <html>
      <head>
        <script type="text/javascript" src="D:\jQuery\jQuery.js"></script>
        <script type="text/javascript">
          $(document).ready(function () {
            $("button").click(function () {
              $("h1,h2,p").addClass("blue");
              $("div").addClass("important");
            });
          });
        </script>
        <style type="text/css">
        /* 利用jQuery可以很好地使用CSS添加了类 */
          .important {
            font-weight: "bold", font-size= "5em";
          }
          .blue {
            color: blue;
          }
          /* 也可以把两个类都写到括号里,比如addClass(important blue) */
          /* 同理,可以使用removeClass()来删除class */
          /* 甚至可以添加/删除,使用toggleClass */
        </style>
      </head>
      <body>
        <h1>Heading</h1>
        <h2>Heading</h2>
        <p>this is a paragraph</p>
        <p>this is another pareaiad</p>
        <div>This is a paragraph sd</div>
        <button>add</button>
      </body>
    </html>
    
    ```

    

6.  css()方法指定当前标签的属性

7.  获取元素大小

    ```javascript
    <html>
      <head>
        <script type="text/javascript" src="D:\jQuery\jQuery.js"></script>
        <script type="text/javascript">
          $(document).ready(function () {
            $("button").click(function () {//获取边框属性
              var txt = "";
              txt += " "+ $("#div1").height() + "</br>";
              txt +=" "+ $("#div1").width() + "</br>";
              txt +=" "+ $("#div1").outerHeight() + "</br>";
              txt +=" "+ $("#div1").outerWidth() + "</br>";
              $("#div1").html(txt);
            });
          });
        </script>
      </head>
      <body>
        <h1>Heading</h1>
        <h2>Heading</h2>
        <p>this is a paragraph</p>
        <p>this is another pareaiad</p>
        <div id="div1"
          style="
            height: 100px;
            width: 300px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightblue;
          "
        ></div>
        <button>add</button>
      </body>
    </html>
    
    ```

    

8.  遍历

    ```javascript
    <html>
      <head>
        <script type="text/javascript" src="D:\jQuery\jQuery.js"></script>
        <script type="text/javascript">
          $(document).ready(function () {
            $("#parents").click(function () {
              $("li").parents("ul").css("color", "green");
              // $("br").parentsUntil("body").css("color", "green");
    
              //parent方法返回当前节点的父节点
            });
            // $("body").children("div").css("color","green");
            // $("body").find("span").css("color","green");
    
            //siblings("p")返回所有<p>元素的同胞元素
            //next()返回当前元素的下一个同胞元素
            //nextAll()返回当前元素所有跟随的同胞元素,nextUntil("p")返回一直到<p>标签的元素
            //pre与next方法一致
          });
        </script>
      </head>
      <body>
        组组组祖父
        <div>
          组组祖父
          <div>
            组祖父
            <ul>
              祖父节点
              <li>
                直接父节点
                <br />
                <span>我是子节点</span>
              </li>
            </ul>
          </div>
        </div>
        <button id="parents">找父亲</button>
        <button id="children">找儿子</button>
      </body>
    </html>
    
    ```

    

9.    过滤遍历

      可以通过方法first(),last(),eq()等过滤

      $(“p”).filter(“.intro”)//返回所有带有类名intro的\<p>元素,不符合的会被删除

      not(“规则”)

      

10.  load()函数可以从服务器加载数据,并且放入指定的地方

     $(“#div1”).load(“nihao.txt”)//将文本文件加载到div元素之中

11.   两种常用的方法get和post分别是向服务端请求数据和向指定的资源发送数据

12.  noconflict()方法会释放$标识符,可以自己定义

梵谷的忧伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery

## jQuery1. 文档就绪事件 ```javascript //为了防止文档在完全加载之前就运行jQuery代码,需要将jQuery代码都放入一个doucument ready函数中 $(document).ready(function(){ ... }); //或者写成 $(function(){ ... }); ``` 2. jQuery基础选择器 ```javascript //j.
复制链接

扫一扫

专栏目录