jQuery 基础小结

最新推荐文章于 2024-08-09 02:16:38 发布

ForeverNagisa

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量268

点赞数

分类专栏： html5 文章标签： jquery javascript

本文链接：https://blog.csdn.net/forevernagisa/article/details/79591274

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是jQuery

jQuery 是一个 JavaScript 库极大地简化了 JavaScript 编程

引入方式

建议下载类库进行本地引入下载地址 http://jquery.com/download/
< script type=”text/javascript” src=”../JQuery/jquery-3.3.1.js”>< /script>

JQuery 示例

<div id="d1"></div>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*核心函数: jQuery 简写形式$
             * $(function) 是 $(document).ready(function(){})的简写形式, 表示当页面中的DOM结构加载完毕时
             * $(选择器) 获取对应选择器的元素 返回的是jquery对象
             * $(html标签形式字符串) 创建DOM元素
             * $(html元素对象) 将原生js对象转为jQuery对象
             */
            $(function(){
                //jquery code
            });
            //注: 为了避免文档在完全加载之前运行jquery代码,建议在ready函数中书写jquery代码
            /*区别window.onload:
             * 1.时机不同: onload是当所有资源(DOM,图片,音视频)加载完毕; 而ready是当DOM加载完毕时
             * 2.onload是原生js中的, 而ready是jquery中的方法
             * 3.onload一个页面只能触发一次(只能出现一次), 而ready可以同时出现多次, 都可以触发执行
             */
            //获取元素
            $("#d1");
            $(".d2");
            $("#list>li");
            //创建元素
            $("<div></div>");
            //原生对象转为jQuery对象
            //若要使用jQuery中提供的方法, 需要转为jQuery对象后才能调用
            $(document);
        </script>

强大的基础选择器

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="../JQuery/jquery-3.3.1.js"></script>
    <style media="screen">
      .item {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="item">1</div>
    <div class="item">2</div>
    <p>
      <ol>
        <li>Hello</li>
      </ol>
    </p>
    <p>How are you?</p>
  </body>
  <script type="text/javascript">
    // JQuery
    // 获取元素
    // $("选择器") 获取和选择器相匹配的元素
    $(".item").css("color", "white");
    // 设置多个属性 参数是对象
    $(".item").css({
      "background-color": "green",
      "margin-left": "50px",
      "border": "1px red solid"
    })
    $(".item").css("width", function(index, oldValue) {
      console.log(index, oldValue);
      return (index + 1) * 100;
    })
    // 获取元素属性 只能获取第一个
    // 设置元素属性 是对所有的元素生效
    console.log($(".item").css("width"));
    // 修改内容
    // $("p").text("CLANNAD");
    // $("p").text(function() {
    //   return "after story";
    // });

    // 通过JQ的选择器获取到的是JQ对象
    // 通过原生方法获取的是原生对象
    // JQ对象只能调用JQ的方法 原生对象只能调用原生的方法 但是JQ 可以和 JS 混编
    // 原生对象 -> JQ 对象
    var item = document.getElementsByClassName("item")[0];
    $(item).css("color", "red")
    // JQ对象 -> 原生对象
    $(".item")[1].innerHTML = "JQ转原生"
    $(".item").get(0).innerHTML = "JQ转原生"

    // JQ里获取第几个元素 eq 获取到的是JQ对象
    $(".item").eq(0).html("这是第一个")

    // 破坏性操作和回到破坏性操作之前
    // end()

    // 移交$的控制权
    // jQuery(".item") 等价于 $(".item")
    // var james = jquery.noConflict();  从此以后不再使用 $ 代表 jQuery 取而代之的是 james

    //创建元素
    $("<div></div>").html("新的JQ对象").appendTo($("body"))

    //  A.append(B) A里面添加B A是父级
    //  A.appendTo(B) 把A加到B里面 B是父级
    // A.after(B) A后面添加B A在前面
    // A.insertAfter(B) 把A插入到B后面 B在前面

    // 删除元素
    // remove() 删除元素 同时清空绑定的事件
    // empty() 删除元素内容 元素本身还在
    // detach() 删除元素 不清空绑定事件
    $("p").filter(function(index) {
      return $("ol", this).length == 0;
    });
    // JQ对象设置属性
    // attr 设置的属性都会被添加到标签上 也能读取到标签上的自定义属性 prop不能!
    // prop 可以读取到原生对象的自带属性和自定义属性 attr不能
    $(".item").attr("title", "这是提示")
    $(".item").prop("title", "这是提示")
  </script>

</html>

强大的CSS样式操作

<body>
        <input type="text" />
        <img src=""/>
        <input type="checkbox" name="" id="" checked />
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*attr("属性名", 属性值 | 函数) 设置元素对应属性为对应属性值
             * attr("属性名") 获取对应属性的值
             * 
             * prop("属性名", 属性值 | 函数) 设置元素对应属性为对应属性值
             * prop("属性名") 获取对应属性的值
             * 
             * removeAttr("属性名")
             * removeProp("属性名")
             */
            /*两种方式的区别:
             * attr() 常用于操作元素的自定义属性,也可以操作自带属性
             * prop() 常用于操作元素的自带属性
             * 当操作的是布尔值类型的属性时,使用prop()
             */
            $(function() {
                //添加一个属性
                $("input:eq(0)").attr("placeholder", "请输入");
                //可同时添加多个属性: 以对象形式设置
                $("img").attr({
                    src: "http://p3.ifengimg.com/a/2018_10/99fc62f2a0b668c_size53_w552_h552.jpg",
                    width: 300,
                    height: 400
                });
                //attr("属性名") 获取对应属性的值
                console.log($("img").attr("src"));

                //参数2也可以是函数 该函数有两个参数,分别表示下标以及对应属性原来的值, 必须返回对应的属性值
                $("img").attr("height", function(i, v) {
                    console.log(i,v);
                    return 300;
                });

                //添加一个属性
                $("input:first").prop("placeholder", "=.=");
                //添加多个属性
                $("img").prop({
                    width: 100,
                    height: 100,

                });
                //区别: 当要获取元素的自带属性是布尔类型的值时, 通过attr无法正常获取布尔值, 该场景下使用prop获取元素布尔类型的属性值
                console.log($(":checkbox").attr("checked"));
                console.log($(":checkbox").prop("checked"));
            });
        </script>
    </body>