jQuery

jQuery概念

jQuery就是JavaScript和查询(Query)，通过js代码实现对页面的快速查询。
它的核心思想是write less，do more(写的更少，做的更多)
jQuery是一款优秀的，快速的，简洁Javascript框架(代码库)。
在它内部封装了JavaScript功能代码，使用来优化HTML文档处理，事件处理，和Ajax交互。

JavaScript矿建：本质上就是一些js文件。在它内部封装了js的原生代码而已。

// 封装一下根据id获取页面元素的方式
function $(selector) {
    if (selector.startsWith("#")) {
        var ele = document.getElementById(selector.substring(1));
        return ele;
    } else if (selector.startsWith(".")){
        var elementsByClassName = document.getElementsByClassName(selector.substring(1));
        return elementsByClassName;
    } else {
        var elementsByTagName = document.getElementsByTagName(selector);
        return elementsByTagName;
    }
}

    <script src = "./js/zhiyou.js"></script>
    <script>
        window.onload = function () {
            // 获取页面中的input标签元素  id  ClassName name  TagName
            // 通过id的方式来获取的
            var input01 = $("#lq");
            var input02 = $("#zq");
            alert(input01.value);
            alert(input02.value);
            var inputs = $(".inp01");
            alert(inputs[0].value);
            alert(inputs[1].value);
            // 通过标签选择器来获取页面中的元素
            var elementsByTagName = $("input");
            alert(elementsByTagName);
        }
    </script>
</head>
<body>
    <input type="text" value="篮球" id="lq" />
    <input type="text" value="足球" id="zq" />
    <input type="text" value="乒乓球" class="inp01"/>
    <input type="text" value="排球" class="inp01" />
</body>

快速入门

步骤
1. 下载一个jp插件
2. 版本介绍：目前市面上有三种版本，优先使用1.xxx
3. 压缩版本(jquery.min.js<生产版本，体积较小，加载快>)，和为压缩版本(jquery.js<开发版本>)
4. 在项目中引入jquery插件，引入到web目录下，在web目录下新建一个js文件，粘贴进去。
5. 在页面中通过 <script src = "jQuery路径"></script>

两种对象获取方式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        onload = function (ev) {
            //dom对象获取方式
            var elementById1 = document.getElementById("lq");
            var elementById = document.getElementById("zq");
            //alert(elementById)//[object HTMLInputElement]
            //alert(elementById1)//[object HTMLInputElement]
            //使用jQuery对象获取方式 选择器 --》参考css中的选择器语法
            var $lq = $("#lq");
            var $zq = $("#zq");
            //alert($lq)//[object Object]
            //alert($zq)//[object Object]

            var inputs = document.getElementsByClassName("inp01");
            //alert(inputs.length)//2
            //alert(inputs.size)//undefined
            var $input01 = $(".inp01");
            //alert($input01.length)//2
            //alert($input01.size())//2

            //原生js方式 --》获取inputs对象数组 value
            /*for (var i = 0; i < inputs.length; i++) {
                alert(inputs[i].value)
            }*/
            //jquery 方式 获取input输入框中的值
            //alert($input01.val()) // 两个input输入框(只输出了一个)
            /*for (var i = 0; i <$input01.length ; i++) {
                //$input01[i]  -->把jQuery对象转换成dom对象
                alert( $input01[i].value)
            }*/

            //两个对象相互转换
            //1. jq  -》dom ：jQuery对象[索引] / jQuery对象.get(索引)
            var $input = $("input");
            /*for (var i = 0; i <$input.size() ; i++) {
                //$input[i].value="棒球" //第一种
                $input.get(i).value="羽毛球" //第二种
            }*/
            //2. dom ->jq对象  $(dom对象)
            var tagName = document.getElementsByTagName("input");
            $(tagName).val("铅球")
            //jQuery对象在调用方法时，如果是修改的话，先内部遍历到每一个jQuery对象，然后再次执行该方法

            //html()
            //$("div").html("我是一个div标签")
        }
    </script>
</head>
<body>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<input type="text" value="篮球" id="lq">
<input type="text" value="足球" id="zq">
<input type="text" value="乒乓求" id="ppq" class="inp01">
<input type="text" value="排球" id="pq" class="inp01">
</body>

jQuery对象和js原生对象的区别与转换

获取方式：
- jQuery对象：通过$("选择器")方式来获取页面元素
- js原生dom对象：通过window.document.getElementByXxxx() 方式来获取的
jQuery和js原生的dom对象的方法不通用。不能互调。
两者之间可以相互转换
- jq -》dom ：jQuery对象[索引] / jQuery对象.get(索引)
- dom 《-jq ：$()
- 备注：js只能通过四种方式来获取页面中的元素document.getElementByXxx()，相对于js原生方式来说，jQuery获取页面元素更加灵活，可以借助于css选择器来实现。

js遍历注意事项

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>-->
    <script type="text/javascript">
        onload = function (ev) {
            //获取input所有标签
            var tagName = document.getElementsByTagName("input");
            //遍历
            // of  --> 获取的是对象数组中的每一个对象也就是vlaue值["xm","xh","xs","xl"]
            for (let tn of tagName) {
                tagName.value = "棒球";
            }
            //in --> 获取的是对象数组中的每一个对象对应的索引值["xm","xh","xs","xl"]-》0 1 2 3
            for (var tn in tagName) {
                tagName[tn].value = "羽毛球";
            }
            /*
            * for in -》es5 遍历key值 索引
            * 只能用于数组的遍历
            * for of -》es6 遍历value值 对象
            * 不但可以用于数组的遍历，还可以用于对象中的属性集
            * */
            /*
            * document.write() 方法可以用于向页面插入一些内容，浏览器会按照html元素的顺序依此解析出来。并展示
            * 注意：当文档一旦加载完毕。document.write()会覆盖以往的页面内容
            * 也就是浏览器会重写document对象内容
            * */
        }
    </script>
</head>
<body>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<input type="text" value="篮球" id="lq">
<input type="text" value="足球" id="zq">
<input type="text" value="乒乓求" id="ppq" class="inp01">
<input type="text" value="排球" id="pq" class="inp01">
<script type="text/javascript">
    document.write("<hr>") //此时不会覆盖
    window.onload = function (ev) {
        document.write("<hr>")//此时会覆盖
    }
</script>
</body>

事件绑定

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        onload = function () {
            /*//给第一个input标签绑定 点击事件
            var inputLQ = document.getElementById("lq");
            inputLQ.onclick = function () {
                alert("我被点到了")
            }

            $("#zq").click(function () {
                alert("我被点到了")
            })
            $("#ppq").dblclick(function () {
                alert("我被双击点到了")
            })
            //时间注册
            $("#pq").on("click", function () {
                alert("我被点到了")
            })*/

            $("#zq").on("focus",function () {
                //$("#zq").val("排球")
                //this指代的是当前操作的dom对象
                this.value=("羽毛球");
            })
            $("#zq").on("blur",function () {
                this.value="棒球";
            })
        }
    </script>
</head>
<body>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<input type="text" value="篮球" id="lq">
<input type="text" value="足球" id="zq">
<input type="text" value="乒乓求" id="ppq" class="inp01">
<input type="text" value="排球" id="pq" class="inp01">
</body>

选择器

作用：筛选具有相似特征的元素标签。

基本操作：

事件绑定

事件源(标签)+事件名称(具体事件)+监听器(实现的代码)
页面加载
- 当页面加载的时候需要给事件源绑定事件，以及做相关的事情业务。如果我们用原生js方式：window.onload=function() {};,如果我们使用jQuery方式实现页面加载方式：$(document).ready(function(){ });
- 在实际开发中，我们一般用它的简化版，格式：$(function(){})
- 对比原生js方式区别：window.onload=function=(){};如果原生js如果书写多个，那么会出现覆盖效果(后一个把前一个覆盖了)。但是对于jQuery来说，可以书写多个页面载入函数--》入口函数
- jQuery和原生js在进行载入的时候有先后顺序。jQuery加载时机优先于原生js方式。

样式控制：css()方法 --》style

单个样式

语法格式：$("选择器").css("属性名"."属性值");
多个样式

语法格式：$("选择器").css({"属性名":"属性值","属性名":"属性值"...});

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //给第一个div标签设置背景
            document.getElementsByTagName("div")[0].style.backgroundColor="red"
            $("#div02").css("background-Color","blue")
            var css = $("#div03").css("background-Color");
            //alert(css)//rgb(255, 192, 203)
            //给第二个div设置多个样式
            $("#div02").css({"backgroundColor":"grey","height":"500px","width":"500px",
            "font-size":"30px","font-wight":"bolder"})
        })
    </script>
</head>
<body>
<div>div1</div>
<div id="div02">div1</div>
<div id="div03" style="background-color: pink">div1</div>
<input type="text" value="篮球" id="lq">
<input type="text" value="足球" id="zq">
<input type="text" value="乒乓求" id="ppq" class="inp01">
<input type="text" value="排球" id="pq" class="inp01">
</body>

分类

基本选择器：

id选择器，格式：$("#id值") 获取的是单个标签元素
class选择器，格式：$(".class值") 获取的是指定的class属性值对应的标签元素
标签选择器，格式：$("标签名") 获取的页面所有匹配的标签元素
并集选择器，格式：$("选择器1","选择器2",...) 获取的是匹配选择器中对应的标签元素
交际选择器，格式：$("选择器1""选择器2"...)获取的是满足同时满足多个选择器对应的标签元素

层级选择器：

后代选择器，格式：$("选择器1" "选择器2") (注意有空格)选择选择器1内部的所有选择器对应的标签元素。
子选择器，格式：$("选择器1">"选择器2") 获取选择器1内部所有选择器2对应的直接子标签。

属性选择器：表单标签使用较多

属性选择器：表单标签中使用较多

$("标签名[属性=属性值]") 获取的是就是u指定的属性名=属性值对应的标签元素
符合属性选择器：

$("标签名[属性名1=属性值][属性名2=属性值]...") 获取同时满足多个属性名=属性值对应的标签元素。

过滤选择器

偶数选择器

:even 从零开始计数索引 $("div:even") 索引02468..-->对应的标签顺序1357..
奇数选择器

:odd 从零开始计数索引 $("div:odd") 索引1357..-->标签顺序2468..
大于索引选择器

gt:(索引值)
小于索引选择器

lt:(索引值)
等于索引选择器

eq:(索引值)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function () {
            //奇数行的颜色为绿色 索引依然是从零开始计算 1357  标签顺序2468
            //tr --》获取的是所有的jQuery对象
            //列标题过滤掉 索引是从0开始计数的
            $("tr:gt(0):odd").css("background-color", "green");
            //偶数行的颜色为粉色
            $("tr:gt(0):even").css("background-color", "pink");
        })

    </script>
</head>
<body>
<table border="1" align="center" width="500px">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
    </tr>
</table>

表单过滤选择器

可用元素选择器

:enable 获取可用元素
不可用元素选择器

:disabled 获取不可用元素
选中元素选择器
- 下拉列表中
  
  :selected 获取到的下拉列表中的选中的元素
- 互斥
  
  :checked 获取到的是互斥单选框或者复选框选中的元素

DOM操作

内容操作

html() -->innerHTML 获取元素的内容，设置元素的内容内容=文本内容/子标签
text() -->innerText 只能获取到标签的纯文本信息

val() -->value 获取标签的value属性值

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var html = $("div").html();
            //alert(html)//<a></a>
            //$("div").html("<h3>我是一个大标题</h3>")

            var text = $("div").text();
            //alert(text)//超链接 (纯文本内容超链接拿取不到)

            var val = $("option").val();

        })
    </script>
</head>
<body>
<div>
    <select>
        <option value="中国"></option>
        <option value="美国"></option>
    </select>
    <a href="#">超链接</a>
</div>
</body>

属性操作

属性

attr() 获取指定的属性
removeAttr() 删除属性
prop() 获取与设置属性值
removeprop 删除属性值

attr和prop区别

如果操作的是标签本身的属性建议使用prop()

如果操作的是自定义的属性建议attr()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //attr
            $("img").attr("src","032.jpg")
            //var attr = $("img").attr("src");
            //alert(attr)
            //$("img").attr("name","励志语句")
            //removeAttr
            //$("img").removeAttr("name")//通过key值删除
            //prop
            //$("img").prop("src","032.jpg")
            //removeProp
            //$("img").removeProp("alt")
        })
    </script>
</head>
<body>
<img src="" alt=""/>
</body>

css类

addClass() 添加class属性值
removeClass 删除class属性值

toggleClass 切换class属性值，有删除掉，没有就添加上去

<head>
    <style>
        .div01 {
            height: 500px;
            width: 500px;
            background-color: pink;
            border: 1px dotted hotpink;
        }
        .div02 {
            height: 200px;
            width: 300px;
            background-color: purple;
            border: 1px dashed darkgreen;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //$("div").addClass("div01")
            $("#it1").on("click",function () {
                $("div").addClass("div01")
                $("div").removeClass("div02")
            })
            $("#it2").on("click",function () {
                $("div").addClass("div02")
                $("div").removeClass("div01")
            })

            //toggleClass() 有就删除class属性值 没有就添加
            /*$("#it1").on("click",function () {
                $("div").toggleClass("div01");//开关技术
            })*/
        })
    </script>
</head>
<body>
<div></div>
<input id="it1" type="button" value="切换第一种风格">
<input  id="it2" type="button" value="切换第二种风格">
</body>

节点操作 CRUD操作

添加节点
- append() ：通过父元素将子元素添加到父元素的末尾
  
  格式：父元素对象(jQuery).append(子元素对") ：将子元素对象添加到父元素对象的内部，位置在末尾
- prepend() ：通过父元素将子元素添加到父元素的头部
  
  格式：父元素对象(jQuery).prepend(子元素对象) ：将子元素对象添加到父元素对象的内部，位置在头部
- appendTo() ：通过子元素将自己添加父元素内部，并且位置在末尾
  
  格式：子元素对象.appendTo(父元素对象) ：将自己添加父元素内部，并且位置在末尾
- prependTo() 通过子元素将自己添加父元素内部，并且位置在头部
  
  格式：子元素对象.prependTo(父元素对象) ：将自己添加父元素内部，并且位置在头部
```
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./WEB-INF/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").on("click",function () {
                var $One = $("#One");//ul对象
                var $atp = $("#atp");//li对象
                $One.append($atp)
            })
            $("#btn2").on("click",function () {
                var $One = $("#One");//ul对象
                var $atp = $("#bigData");//li对象
                $One.prepend($atp)
            })
        })
    </script>
</head>
<body>
专业:
<ul id="One">
    <li>计算机科学应用</li>
    <li>捂脸往</li>
    <li>软件工厂</li>
    <li>通信工程</li>
</ul>
相关专业
<ul id="Two">
    <li id="atp">人工智能</li>
    <li>ai技术</li>
    <li id="bigData">大数据</li>
</ul>
<input type="button" id="btn" value="添加">
<input type="button" id="btn2" value="添加">
</body>
```
- after() ：添加元素到指定元素的后面
  
  格式：对象1.after(对象2) --》将对象2放到对象1后面，对象1和对象2是同级关系-->兄弟关系
```
<div>
    <div>
        
    </div>
</div>
<div>
</div>
```
- before() ：添加元素到指定元素的前面
  
  格式：对象1.before(对象2) --》将对象2添加到对象1道德前面，对象1和对象2是同级关系-->兄弟关系
删除节点
- remove() 删除元素
  
  格式：对象.remove() ：将此对象删除掉(把自己删除掉)
- empty() 清空元素的所有后代元素
  
  格式：对象.empty() ：将此对象的所有后代删掉，清空，但是保留当前自己对象以及属性节点。
修改节点
查询节点

This用法

如果在调用方法时需要获取标签元素本身，在方法上设定参数为this，此时this表示当前标签。
对于标签如果添加onclick或者onmouse方法的时候，如果方法在<script>标签中直接定义的，那么在方法中获取的this指代的是当前窗口对象window，并不会指代当前标签本身。所以需要获取标签本身的话，直接在方法定义的时候直接使用this作为参数传递
如果js中获取到了某个标签，然后给其绑定某个事件对应的方式，此方法中的this指代的是这个对象的本身。

Serialize方法

概念：序列化，此时在jQuery中针对的是表单提交。

通过这个方法一次性获取到表单中所有值，生成一个字符串，格式：username=zhangsan&password=123445&age=18...

posted @ 2021-01-19 09:19 MikiKawai 阅读(116) 评论(0) 编辑收藏举报

刷新页面返回顶部

魍魉丸

jQuery

jQuery

jQuery概念

快速入门

两种对象获取方式

jQuery对象和js原生对象的区别与转换

js遍历注意事项

事件绑定

选择器

分类

基本选择器：

层级选择器：

属性选择器：表单标签使用较多

过滤选择器

表单过滤选择器

DOM操作

内容操作

属性操作

属性

css类

节点操作 CRUD操作

This用法

Serialize方法

公告