jQuery及下载安装使用, jquery选择器,DOM节点操作.jquery事件

什么是jQuery？

jQuery是一个快速，小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），它使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

优点:
1,提供了强大的功能函数
2,解决浏览器的兼容性问题
3,实现丰富的UI和插件
4,纠正错误的脚本知识

jQuery的下载和安装

不下载本地使用的地址:bootcdn.cn
下载地址: https://jquery.com
在这里插入图片描述

在这里插入图片描述

使用

引入到页面中即可(注意路径问题)

<script src="js/jquery-3.5.1.js"></script>

jQuery核心

$符号在jquery中代表对jquery对象的引用,"jquery"是核心对象;
只有jquery对象才能调用jquery提供的方法

DOM对象与jquery包装集对象

原始的DOM对象只有DOM接口提供的方法和属性,通过js代码获取的对象都是dom对象;
而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能调用jQuery提供的方法
1.1DOM对象
javascript中获取dom对象,dom对象只有有限的属性和方法;

var mydiv = document.getElementsByClassName("mydiv")[0];

1.2jquery包装集对象
可以说是dom对象的扩充在jquery的世界中所有的对象,无论是一个还是一组,都封装成一个jquery包装集,比如获取包含一个元素jquery包装集

 var jqueryDiv = $('.mydiv');

1.3Dom对象转jquery对象
只需要利用$()方法进行包装即可

mydiv2 = $(mydiv);

1.3jquery对象转Dom对象
jquery对象转dom对象只需要取数组中的元素即可

var domDiv = jqueryDiv[0];

<body>
    <div class="mydiv">张三</div>
</body>
<script src="js/jquery-3.5.1.js"></script>//引入jquery
<script>
    //dom对象
    var mydiv = document.getElementsByClassName("mydiv")[0];
    // console.log(mydiv);//<div class="mydiv">张三</div>
    //jquery对象获取
    var jqueryDiv = $('.mydiv');
    console.log(jqueryDiv); //jQuery.fn.init [div.mydiv, prevObject: jQuery.fn.init(1)]
    //dom对象转jquer对象只需要利用$()方法进行包装即可
    //dom对象转jquery对象
    mydiv2 = $(mydiv);
    console.log(mydiv2); //jQuery.fn.init(1)  
    //jquery对象转dom对象只需要取数组中的元素即可
    //jquery对象转dom对象
    /* var domDiv = jqueryDiv[0]; 
     console.log(domDiv);//<div class="mydiv">张三</div>*/
</script>

jquery选择器

和使用js操作一样,获取文档中的节点对象是很频繁的一个操作,在jquery中提供了简便的方式供我们查找定位元素,称为jquery选择器
jquery选择器按照功能主要分为"选择"和"过滤"

(1)基础选择器

在这里插入图片描述

<body>
    <div id="mydiv1" class="blue">元素选择器</div>
    <div id="mydiv1">id选择器 <span>span中的内容</span> </div>
    <span class="blue">样式选择器</span>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    //id选择器(当两个id重复时选中html文档中第一个元素)        #id属性值
    var mydiv = $("#mydiv1");
    console.log(mydiv); //0: div#mydiv1.blue
    //类选择器        .class属性值
    var cls = $(".blue");
    console.log(cls); //    0: div#mydiv1.blue     1: span.blue
    //元素选择器       标签名/也叫元素名
    var spans = $("span");
    console.log(spans); //0: span        1: span.blue
    //组合选择器      选择器1,选择器2......(可以理解为或,只要选中的沾边就会被选中)
    var group = $("#mydiv1,div,.blue");
    console.log(group); //0: div#mydiv1.blue
    //1: div#mydiv1
    //2: span.blue
    //通用选择器      *(基本不用)
    var all = $("*");
    console.log(all); //jQuery.fn.init(13)
</script>

(2)层次选择器

在这里插入图片描述

<body>
    <div id="parent">层次选择器
        <div id="child" class="testColor">父选择器
            <div class="gray">子选择器</div>
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
        </div>
        <div>选择器2
            <div>选择器2中的div</div>
        </div>
    </div>


</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    //后代选择器
    var hd = $("#parent div");
    console.log(hd); //选中了四个 0: div#child.testColor 1: div.gray 2: div 3: div
    //子代选择器
    var zd = $("#parent > div");
    console.log(zd); //选中了两个 0: div#child.testColor 1: div
    //相邻选择器
    var xl = $("#child + div"); //只会选中相邻div,必须是div标签,如果不是就不选
    console.log(xl); //0: div(<div>选择器2 <div>选择器2中的div</div> </div>)
    //同辈选择器
    var tb = $(".gray ~ img"); 
    console.log(tb); //0: img 1: img
</script>

(3)表单选择器

表单选择器可以理解为是选中input(表单)中及button(按钮)的type的值
在这里插入图片描述

<body>
    <form id="myform" name="myform" method="post">
        <input type="hidden" name="uno" value="9999" disabled="disabled"> 账号: <input type="text" id="uname" name="uname" /> <br> 密码: <input type="password" id="upwd" name="upwd"><br> 年龄: <input type="radio" id="upwd" name="uage" value="0" checked="checked">小屁孩
        <input type="radio" name="uage" value="1">你懂的 <br> 爱好:
        <input type="checkbox" name="ufav" value="篮球">篮球
        <input type="checkbox" name="ufav" value="爬床">爬床
        <input type="checkbox" name="ufav" value="代码码">代码 <br> 来自: <select name="ufrom" id="ufrom">
        <option value="-1">请选择</option>
        <option value="0">上海</option>
        <option value="1">江苏</option>
    </select><br> 简介: <textarea name="uintro" cols="30" rows="10"></textarea> 头像: <input type="file" /> <br>
        <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20" />
        <button type="button" οnclick="return checkForm();">提交</button>
        <button type="reset">重置</button>
    </form>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    //表单选择器 
    var inputs = $(":input");
    console.log(inputs); //选中所有的input textarea(文本区域) button
    //元素选择器
    var inputs2 = $("input");
    console.log(inputs2); //选中所有的input(只会选input,基础选择器里面学的)
    //文本框选择器
    var texts = $(":text");
    console.log(texts); //选中所有的文本框
    //密码框选择器
    var passwords = $(":password");
    console.log(passwords); //选中密码框
    //单选选择器
    var radios = $(":radio");
    console.log(radios); //选中单选
    //按钮选择器
    var btns = $(" :button");
    console.log(btns); //选中按钮
</script>

jquery DOM操作

jquery也提供了对html节点的操作,而且在原生js的基础进行了优化,使用更加方便
可以做到:
查找元素;创建节点对象;访问和设置节点对象的值以及属性;添加节点;删除节点;删除,添加,修改,设定节点的css样式等

注意:以下的操作方法只使用于jquery对象

操作元素的属性

在这里插入图片描述 1,获取属性
attr(“属性名”)
prop(“属性名”)
2,设置属性
attr(“属性名”,“属性值”)
prop(“属性名”,“属性值”)
3,移除属性
removeAttr(“属性值”)
属性的分类
固有属性:元素本身就有的属性(id,name,class,style)
返回值是boolean的属性:checked(选中),selected(带有预先选定的选项的下拉列表),disabled(disabled 属性规定应该禁用 input 元素)
自定义属性:用户自己定义的属性
区别:
(1)如果是固有属性:attr()和prop()方法均可操作
(2)自定义属性:attr()可操作,prop()不可操作
(3)如果是返回值为布尔类型
若设置了属性,attr()返回具体的值,prop()返回true
若未设置属性,attr()返回undefined,prop()返回false
总结:
如果属性的类型是布尔,
则使用prop()方法,否则使用attr()方法这样就不会出错

<body>
    <input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc">aa
    <input type="checkbox" name="ch" id="bb">bb
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    /*获取属性 ++++++++++++++++++++++++++++++++++     */
    //--获取固有属性-
    var nam = $("#aa").attr("name");
    console.log(nam); //ch
    var nam2 = $("#aa").prop("name");
    console.log(nam2); //ch
    //----返回值是boolean(真假)的属性(元素设置了属性)
    var nam = $("#aa").attr("checked");
    console.log(nam); //checked
    var nam2 = $("#aa").prop("checked");
    console.log(nam2); //true(真)
    //----返回值是boolean(真假)的属性(元素没有设置属性)
    var nam3 = $("#bb").attr("checked");
    console.log(nam3); //undefined
    var nam4 = $("#bb").prop("checked");
    console.log(nam4); // false(假)
    //--获取自定义属性-
    var abs = $("#aa").attr("abc");
    console.log(abs); //aabbcc
    var abs2 = $("#aa").prop("abc");
    console.log(abs2); // undefined
    /*设置属性++++++++++++++++++++++++++++++++++++++++*/
    //固有属性
    $("#aa").attr("value", "1"); //此时第一个input就有了 value="1"
    $("#bb").prop("value", "2");//此时第er个input就有了 value="2"
    //返回值是布尔类型的属性
    $("#bb").attr("checked", "checked"); //此时放置bb的input也被选中
    $("#bb").prop("checked", false); //让其值为false就不被选中了
    //自定义的属性
    $("#aa").attr("usb", "zhao"); //input里面有了usb="赵"的属性
    $("#bb").prop("usb", "zhao"); //没有生效
    /*移除属性++++++++++++++++++++++++++++++++++++++++*/
    $("#aa").removeAttr("checked") //就把这个属性移除了,从而不被选中
</script>

操作元素的样式

在这里插入图片描述

<style>
        div {
    
    
            padding: 8px;
            width: 180px;
        }
        
        .blue {
    
    
            background: blue;
        }
        
        .larger {
    
    
            font-size: 30px;
        }
        
        .green {
    
    
            background: green;
        }
        
        .pink {
    
    
            background: pink;
        }
    </style>
</head>

<body>
    <h3>css()方法设置元素样式</h3>
    <div id="conBlue" class="blue larger">天蓝色</div>
    <div id="conRed">大红色</div>
    <div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    //attr("class")--------  获取元素的样式名
    var cls = $("#conBlue").attr("class");
    console.log(cls);
    //attr("class", "样式名")----- 设置元素的样式
    $("#conBlue").attr("class", "green"); //此时原来的样式会被覆盖,(也就是说是完全覆盖,它就只有green这一个样式,blue作废)
    //addClass( "样式名")--- 添加样式(在原来的基础上添加,原来的样式会被保留,如果出现相同样式,则以后定义为准)
    //复习:css样式的先后顺序是以style标签里面最后写的为准,和属性值中谁的先后无关
    $("#conBlue").addClass("pink"); //这里pink比green靠后,所以显示粉红色
    $("#conBlue").css("blue");
    //css()   添加具体的样式(添加行内样式)
    $("#conRed").css("font-size", "40px"); //此时大红色字体会变成40px
    $("#conRed").css({
    
    
        "font-family": "楷体",
        "color": "blue"
    });
    //removeClass("样式名")  移除样式
    $("#remove").removeClass("larger"); //此时字体大小属性就被移除
</script>

操作元素的内容

在这里插入图片描述

<body>
    <h3> <span>html()和text()方法设置元素内容 </span></h3>
    <div id="html1"></div>
    <div id="html2"></div>
    <div id="text"></div>
    <div id="text2"></div>
    <input type="text" name="uname" value="oop">
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    //html("内容")  设置元素的内容,包含html标签(非表单元素)
    $("#html1").html("<h2>上海<h2>"); //解析标签  上海
    $("#html2").html("上海"); //上海
    //html("")   获取元素的内容,包含html标签(非表单元素)
    var html1 = $("#html1").html();
    console.log(html1); //<h2>上海<h2>
    var html2 = $("#html2").html();
    console.log(html2); //上海
    //text("内容")  设置元素的纯文本内容,不识别html标签(非表单元素)
    $("#text").text("<h2>北京<h2>"); //无法识别标签,页面没写入
    $("#text").text("北京"); //页面写入北京
    //text("")   获取元素的内容,包含html标签(非表单元素)
    var text = $("#text").text();
    console.log(text); //北京(页面虽然没显示,但是能获取到)
    var text2 = $("#text").text();
    console.log(text2); //北京
    //val()  获取元素的值(表单元素)
    var texts = $(":text").val();
    console.log(texts); //oop
    $(":text").val("今天"); //input的value值变为今天

创建元素

在这里插入图片描述

<script src="js/jquery-3.5.1.js"></script>
<script>
    var p = "<p>张三</p>";
    console.log(typeof p); //string 是一个字符串
    console.log($(p)); //p就变成了jqurey对象
</script>

添加元素

在这里插入图片描述注:在添加元素时,如果元素本身不存在,此时会将元素追加到指定位置
如果元素本身存在,会将元素直接剪切到指定位置

      <style>
        div {
    
    
            margin: 10px 0;
        }
        
        span {
    
    
            color: white;
            padding: 8px;
        }
        
        .red {
    
    
            background-color: red;
        }
        
        .blue {
    
    
            background-color: blue;
        }
        
        .green {
    
    
            background-color: green;
        }
        
        .pink {
    
    
            background-color: pink;
        }
        
        .grey {
    
    
            background-color: grey;
        }
    </style>
</head>

<body>
    <h3>prepend()方法前面添加内容</h3>
    <h3>prependTo()方法前面添加内容</h3>
    <h3>append()方法后添加内容</h3>
    <h3>appendTo()方法后添加内容</h3>
    <span class="red">男神</span>
    <span class="blue">偶像</span>
    <div class="green">
        <span>小鲜肉</span>

    </div>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    /*添加元素============*/
    //prepend()  首先创建元素
    var span = " <span>小奶狗</span>";
    //然后得到指定元素,并在指定元素的内部最前面追加内容
    $(".green").prepend(span);
    //prependTo()方法
    var span2 = " <span>我爱你</span>";
    $(span2).prependTo($(".green"))
        //至此他的排列顺序为 我爱你 小奶狗 小鲜肉(加到元素最前面,不论累计多少次仍为第一个)
        // append()方法
    var span3 = " <span>我爱你1</span>";
    var span4 = " <span>我爱你2</span>";
    $(".green").append(span3);
    $(span4).appendTo($(".green"));

    //将已存在内容剪切(样式也跟着)
    $(".green").append($(".red"));
    //追加内容
    var sp1 = '<span class="pink">女神</span>';
    var sp2 = '<span class="grey">歌手</span>';
    $(".blue").before(sp1);
    $(".blue").after(sp2);
</script>

在这里插入图片描述

删除和遍历元素

在这里插入图片描述

<body>
    <h3>删除元素</h3>
    <span class="green">
        jquery <a>删除</a>
    </span>
    <span class="blue">javase</span>
    <span class="green">http协议</span>
    <span class="blue">servlet</span>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    $(".green").remove(); //此时标签和内容都被删除
    $(".blue").empty(); //清空了选中标签的文本内容
</script>

遍历元素

在这里插入图片描述

<body>
    <h3>遍历元素</h3>
    <span class="green">
        jquery <a>删除</a>
    </span>
    <span class="green">javase</span>
    <span class="green">http协议</span>
    <span class="green">servlet</span>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    $(".green").each(function(index, element) {
    
    
            console.log(index); //0 1 2 3
            console.log(element); //获取到每一条的具体内容
            console.log(this); //也是获取到每一条的具体内容
            console.log($(this)); //转为jquery对象
        })
        //index, element这两个参数不需要时可以不写,如下面这样
    $(".green").each(function() {
    
    
        console.log(this); //也是获取到每一条的具体内容
        console.log($(this)); //转为jquery对象
    })
</script>

在这里插入图片描述

jquery事件

ready()类似于onload()事件(预先加载)
ready()可以写多个,按顺序从上到下执行

$(document).ready(function(){
    
    })等价于$(function(){
    
    })

    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function() {
    
    
                console.log("ready加载事件1.....");
            })
            // 也可以这样写
        $(function() {
    
    
            console.log("ready加载事件2.....");
        })
    </script>
</head>
<body>
</body>

在这里插入图片描述

bind()绑定事件

在这里插入图片描述

<body>
    <div id="box">点击查看名言</div>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
  1,确定为哪些元素绑定事件
            获取事件
     2,绑定什么事件(事件类型) 
     第一个参数:事件的类型(如click)  
     3,相应事件触发的,执行的操作
     第二个参数:函数
      //bind()方法绑定,相当于js中的on
                    $("#box").bind("click", function() {
    
    
                        console.log("世上无难事");
                    })
    //js绑定事件(做对比)
    /*  document.querySelector("#box").onclick = function() {
              console.log("原生js绑定");
          }*/
    //直接绑定(推荐使用)
    $("#box").click(function() {
    
    
        //需求禁用按钮
        console.log("世上无难事");

    })
</script>

小练习:点击按钮后按钮被禁用

<body>
    <input id="btn" type="button" value="点击我就被禁用">
    <!-- disabled="disabled"   当有这个属性时就被禁用-->
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    $("#btn").click(function() {
    
    
        console.log(this); //便于理解  this指这个按钮本身
         //$(this)是转为jquery对象
        $(this).prop("disabled", true)
    })
</script>

在这里插入图片描述
绑定多个事件方法(推荐第4种)

<body>
    <input type="button" id="btn1" value="按钮1">
    <input type="button" id="btn2" value="按钮2">
    <input type="button" id="btn3" value="按钮3">
    <input type="button" id="btn4" value="按钮4">
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    //1同时为多个事件绑定同一个函数
    $("#btn1").bind("click mouseout", function() {
    
    
            console.log("按钮1.......");
        })
        //2.为元素绑定多个事件,并设置对应的参数
    $("#btn2").bind("click", function() {
    
    
            console.log("按钮2被点击了....");
        }).bind("mouseout", function() {
    
    
            console.log("按钮2被移开了....");
        })
        //3.为元素绑定多个事件,并设置对应的函数
    $("#btn3").bind({
    
    
            "click": function() {
    
    
                console.log("按钮3被点击了....");
            },
            "mouseout": function() {
    
    
                console.log("按钮3被移开了....");
            }
        })
        //4.直接绑定(推荐使用)
    $("#btn4").click(function() {
    
    
        console.log("按钮4被点击了...");
    }).mouseout(function() {
    
    
        console.log("按钮4移开了...");
    })
</script>