JQuery相关学习笔记

最新推荐文章于 2024-01-20 21:49:50 发布

抹茶星魚

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量205

点赞数 3

分类专栏：学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/mryjf/article/details/106789523

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

概念：一个JavaScript框架，简化JS开发

JQuery对象和JS对象区别与转换

JQuery对象在操作时，更加方便
JQuery 对象和 JS 对象方法不通用
两者相互转换
- jq – > js：jq对象[索引] 或者 jq对象.get(索引)
- js – > jq：$(js对象)

<script>
	//通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs);	//可以将其当做数组来使用（divs.length）
    //让divs中所有的div标签体内容变为"aaa"
    for(var i = 0; i < divs.length; i++){
        divs[i].innerHTML = "aaa";
    }
    
    //通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs);	//也可以当做数组使用（$divs.length）
    //让divs中所有的div标签体内容变为"bbb"（jq方式）
    $divs.html("bbb");
</script>

选择器：筛选具有相似特征的元素(标签)

基本操作学习

事件绑定

<script>
    //1.获取btn按钮
    $("#btn").click(function(){
        alert("abc");
    });
</script>

入口函数

$(function () {});
window.onload 和 $(function) 区别
- window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
- $(function) 可以定义多次

样式控制：css方法

<script>
    //$("#div1").css("background-color","pink");
    $("#div1").css("backgroundColor","pink");
</script>

分类

基本选择器

标签选择器（元素选择器）：$("html标签名") 获得所有匹配标签名称的元素
- $("div")
id选择器：$("#id的属性值") 获得与指定id属性值匹配的元素
- $("#name")
类选择器：$(".class的属性值") 获得与指定的class属性值匹配的元素
- $(".mini")
并集选择器：$("选择器1,选择器2....") 获取多个选择器选中的所有元素

层级选择器

后代选择器：$("A B") 选择A元素内部的所有B元素
子选择器：$("A > B") 选择A元素内部的所有B子元素

属性选择器

属性名称选择器：$("A[属性名]") 包含指定属性的选择器
属性选择器：$("A[属性名='值']") 包含指定属性等于指定值的选择器
复合属性选择器：$("A[属性名='值'][]...") 包含多个属性条件的选择器

<script>
	//含有属性title的div元素
    $("div[title]")
    
    //属性title的值等于test的div元素
    $("div[title='test']")
    
    //属性title值，以te开始的div元素
    $("div[title^='te']")
    
    //属性title值，以est结束的div元素
    $("div[title$='est']")
    
    //属性title值，包含es的div元素
    $("div[title*='es']")
    
    //属性有id的，title值含有"es"的div元素
    $("div[id][title*='es']")
</script>

过滤选择器

首元素选择器：first 获得选择的元素中的第一个元素
尾元素选择器：last 获得选择的元素中的最后一个元素
非元素选择器：not(selector) 不包括指定内容的元素
偶数选择器：even 偶数，从 0 开始计数
奇数选择器：odd 奇数，从 0 开始计数
等于索引选择器：eq(index) 指定索引元素
大于索引选择器：gt(index) 大于指定索引元素
小于索引选择器：lt(index) 小于指定索引元素
标题选择器：header 获得标题（h1~h6）元素，固定写法

<script>
    //第一个div元素
	$("div:first")
    
    //最后一个div元素
    $("div:last")
    
    //class属性不为one的div元素
    $("div:not(.one)")
    
    //索引值为偶数的div元素
    $("div:even")
    
    //索引值为奇数的div元素
    $("div:odd")
    
    //索引大于3的div元素
    $("div:gt(3)")
    
    //索引等于3的div元素
    $("div:eq(3)")
    
    //索引小于3的div元素
    $("div:lt(3)")
</script>

表单过滤选择器

可用元素选择器：enabled 获得可用元素
不可用元素选择器：disabled 获得不可用元素
选中选择器：checked 获得单选/复选框选中的元素
选中选择器：selected 获得下拉框选中的元素

<script>
    //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
    $("#b1").click(function () {
        $("input[type='text']:enabled").val("aaa");
    });

    //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
    $("#b2").click(function () {
        $("input[type='text']:disabled").val("aaa");
    });

    //<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
    $("#b3").click(function () {
        alert($("input[type='checkbox']:checked").length);
    });

    //<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
    $("#b4").click(function () {
        alert($("#job>option:checked").length);
    });
</script>

DOM操作

内容操作

html()：获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
text()：获取/设置元素的标签体纯文本内容<a><font>内容</font></a> --> 内容
val()：获取/设置元素的value属性值

<script>
	//获取 myinput 的 value 值
    var value = $("#myinput").val();
    alert(value);	//假设input的框输入了"阿旺"，那么结果将输出"阿旺"
    
    //设置 myinput 的 value 值
    $("#myinput").val("李四");	//input的框内显示阿旺
    
    //获取 mydiv 的标签体内容
    var html = $("#mydiv").html();
    alert(html);	//<a><font>内容</font></a>
    $("#mydiv").html("aaa");	//<a><font>内容</font></a>变为aaa
    
    //获取 mydiv 文本内容
    var text = $("#mydiv").text();	//只能获取纯文本内容
</script>

属性操作

通用属性操作
- attr()：获取/设置元素的属性
- removeAttr()：删除属性
- prop()：获取/设置元素的属性
- removeProp()：删除属性
attr和prop区别
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr

<script>
    //获取北京节点的name属性值
    var name = $("#bj").attr("name");
    alert(name);

    //设置北京节点的name属性的值为dabeijing
    $("#bj").attr("name","dabeijing");

    //新增北京节点的discription属性 属性值是didu
    $("#bj").attr("discription","didu");

    //删除北京节点的name属性并检验name属性是否存在
    $("#bj").removeAttr("name");

    //获得hobby的的选中状态
    var checked = $("#hobby").prop("checked");
    alert(checked);	//true 或 false
    //checked中用attr则会获取不到数据
</script>

对class属性操作
- addClass()：添加class属性值
- removeClass()：删除class属性值
- toggleClass()：切换class属性
  - toggleClass("one")：判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加
- css()：添加css样式、获取css样式

<script>
    //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
    $("#b1").click(function () {
        $("#one").prop("class","second");
    });
    
    //<input type="button" value="addClass"  id="b2"/>
    $("#b2").click(function () {
        $("#one").addClass("second");
    });
    
    //<input type="button" value="removeClass"  id="b3"/>
    $("#b3").click(function () {
        $("#one").removeClass("second");
    });
    
    //<input type="button" value=" 切换样式"  id="b4"/>
    $("#b4").click(function () {
        $("#one").toggleClass("second");
    });
    
    //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
    $("#b5").click(function () {
        var backgroundColor = $("#one").css("backgroundColor");
        alert(backgroundColor);
    });
    
    //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
    $("#b6").click(function () {
        $("#one").css("backgroundColor","green");
	});
</script>

CRUD操作

append()：父元素将子元素追加到末尾
- 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
prepend()：父元素将子元素追加到开头
- 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
appendTo()
- 对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾
prependTo()
- 对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头
after()：添加元素到元素后边
- 对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
before()：添加元素到元素前边
- 对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
insertAfter()
- 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
insertBefore()
- 对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
remove()：移除元素
- 对象.remove()：将对象删除掉
empty()：清空元素的所有后代元素。
- 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

<script>
    //<input type="button" value="将反恐放置到city的后面"  id="b1"/>
    $("#b1").click(function () {
        //append()
        $("#city").append($("#fk"));
        //appendTo()
        $("#fk").appendTo($("#city"));
    });
    //<input type="button" value="将反恐放置到city的最前面"  id="b2"/>
    $("#b2").click(function () {
        //prepend()
        $("#city").prepend($("#fk"));
        //prependTo()
        $("#fk").prependTo($("#city"));
    });
    //<input type="button" value="将反恐插入到天津后面"  id="b3"/>
    $("#b3").click(function () {
        //after()
        $("#tj").after($("#fk"));
        //insertAfter()
        $("#fk").insertAfter($("#tj"));
    });
    //<input type="button" value="将反恐插入到天津前面"  id="b4"/>
    $("#b4").click(function () {
        //before()
        $("#tj").before($("#fk"));
        //prependTo()
        $("#fk").insertBefore($("#tj"));
    });
</script>
<body>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="tj" name="tianjin">天津</li>
        <li id="cq" name="chongqing">重庆</li>
    </ul>

    <ul id="love">
        <li id="fk" name="fankong">反恐</li>
        <li id="xj" name="xingji">星际</li>
    </ul>
</body>

<script>
    //<input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
    $("#b1").click(function () {
        $("#bj").remove();
    });
    
    //<input type="button" value="删除city所有的li节点，清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
    $("#b2").click(function () {
        $("#city").empty();
    });
</script>
<body>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="tj" name="tianjin">天津</li>
        <li id="cq" name="chongqing">重庆</li>
    </ul>
    <p class="hello">Hello</p> how are <p>you?</p>
</body>

动画

三种方式显示和隐藏元素

默认显示和隐藏方式：show([speed,[easing],[fn]])
- speed：动画的速度。三个预定义的值slow、normal、fast或表示动画时长的毫秒数值(如：1000)
- easing：用来指定切换效果，默认是"swing"，可用参数"linear"
  - swing：动画执行时效果是先慢，中间快，最后又慢
  - linear：动画执行时速度是匀速的
- fn：在动画完成时执行的函数，每个元素执行一次。
滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])

<script>
    //隐藏div
    function hideFn() {
        /*
        $("#showDiv").hide("slow","swing",function () {
			alert("隐藏了。。");
        });
        */
        //$("#showDiv").hide(5000,"swing");     //默认方式
        //$("#showDiv").slideUp("slow");        //滑动方式
        $("#showDiv").fadeOut("slow");      //淡入淡出

    }
    //显示div
    function showFn() {
        /*
        $("#showDiv").show("slow","swing",function () {
        	alert("显示了。。");
        });
        */
        //$("#showDiv").show("slow","linear");     //默认方式
        //$("#showDiv").slideDown("slow");        //滑动方式
        $("#showDiv").fadeIn("slow");      //淡入淡出
    }
    //切换显示和隐藏
    function toggleFn() {
        //$("#showDiv").toggle("fast","swing");     //默认方式
        //$("#showDiv").slideToggle("slow");      //滑动方式
        $("#showDiv").fadeToggle("slow");      //淡入淡出
    }
</script>
<body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
    <div id="showDiv" style="width:300px;height:300px;background:pink">
        div显示和隐藏
    </div>
</body>

遍历

js的遍历方式

for(初始化值;循环结束条件;步长)

jq的遍历方式

jq对象.each(callback)
- 语法：jquery对象.each(function(index,element){});
  - index：就是元素在集合中的索引
  - element：就是集合中的每一个元素对象
  - this：集合中的每一个元素对象
- 回调函数返回值
  - true:如果当前function返回为false，则结束循环(break)
  - false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
$.each(object, [callback])
for..of jquery 3.0 版本之后提供的方式：for(元素对象 of 容器对象)

<script type="text/javascript">
    $(function () {
        //获取所有的ul下的li
        var citys = $("#city li");
        /*
            //1.js的遍历方式，遍历li
            for (var i = 0; i < citys.length; i++) {
                if ("上海" == citys[i].innerHTML){
                    //break;
                    //continue;
                }
                alert(i+":"+citys[i].innerHTML);//获取内容
            }
        */

        /*
        	//2.jq对象.each(callback)
            citys.each(function (index,element) {
            	//获取li对象，第一种方式 this
                //alert(this.innerHTML);
                //alert($(this).html());

                //获取li对象，第二种方式，在回调函数中定义参数 index(索引) element(元素对象)
                //alert(index+":"+element.innerHTML);
                //alert(index+":"+&(element).html());

                //判断如果是上海，则结束循环
                if ("上海" == $(element).html()){
                	//如果当前function返回为false，则结束循环（break）
                    //如果返回为true，则结束本次循环，继续下次循环（continue）
                    return true;
                }
                alert(index+":"+$(element).html());
            });
        */

        /*
        	//3. $.each(object,[callback])
        	$.each(citys,function () {
            	alert($(this).html())
            });
        */

        //4.for...of：JQuery 3.0版本之后提供的方式
        for (li of citys){
            alert($(li).html());
        }
    });
</script>
<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</body>

事件绑定

jquery标准的绑定方式
- jq对象.事件方法(回调函数);
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
  - 表单对象.submit(); //让表单提交

<script type="text/javascript">
    $(function () {
        /*
        	//1.获取name对象，绑定click事件
        	$("#name").click(function () {
                alert("我被点击了。。。");
            });
        */

        /*
        	//给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
        	$("#name").mouseover(function () {
                alert("鼠标来了...");
            });
            $("#name").mouseout(function () {
               alert("鼠标走了...")
            });
        */

        /*
        	//简化操作，链式编程
        	$("#name").mouseover(function () {
                alert("鼠标来了...");
            }).mouseout(function () {
                alert("鼠标走了...");
            });
        */

        //让文本输入框获得焦点
        //$("#name").focus();

        //让表单提交
        //表单对象.submit();
    });
</script>
<body>
    <input id="name" type="text" value="绑定点击事件">
</body>

on绑定事件/off解除绑定
- jq对象.on("事件名称",回调函数)
- jq对象.off("事件名称")
  - 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

<script type="text/javascript">
    $(function () {
        //1.使用on给按钮绑定单击事件 click
        $("#btn").on("click",function () {
            alert("我被点击了...");
        });

        //2.使用off解除btn按钮的单击事件
        $("#btn2").click(function () {
            //解除btn的单击事件
            $("#btn").off("click");
            //$("#btn").off();//将组件上的所有事件全部解绑
        });
    });
</script>
<body>
    <input id="btn" type="button" value="使用on绑定点击事件">
    <input id="btn2" type="button" value="使用off解绑点击事件">
</body>

事件切换：toggle
- jq对象.toggle(fn1,fn2...)
  - 当单击jq对象对应的组件后，会执行fn1；第二次点击会执行fn2…
- 注意：1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。
```
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
```

<script type="text/javascript">
    $(function () {
        //获取按钮，调用toggle方法
        $("#btn").toggle(function () {
            //改变div背景色backgroundColor颜色为green
            $("#myDiv").css("backgroundColor","green");
        },function () {
            //改变div背景色backgroundColor颜色为green
            $("#myDiv").css("backgroundColor","pink");
        });
    });
</script>
<body>
    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>

插件：增强JQuery的功能

实现方式

$.fn.extend(object)：增强通过JQuery获取的对象的功能 $("#id")
$.extend(object)：增强JQuery对象自身的功能 $/JQuery

<script type="text/javascript">
    //使用JQuery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
    //1.定义jQuery的对象插件
    $.fn.extend({
        //定义了一个check()方法，所有的jq对象都可以调用该方法
        check:function () {
            //让复选框选中
            //this:调用该方法的jq对象
            this.prop("checked",true);
        },
        uncheck:function () {
            //让复选框不选中
            this.prop("checked",false);
        }
    });

    $(function () {
        //获取按钮
        //$("#btn-check").check();
        //复选框对象.check();
        $("#btn-check").click(function () {
            $("input[type='checkbox']").check();
        });
        $("#btn-uncheck").click(function () {
            $("input[type='checkbox']").uncheck();
        });
    });
</script>
<body>
    <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
    <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
    <br/>
    <input type="checkbox" value="football">足球
    <input type="checkbox" value="basketball">篮球
    <input type="checkbox" value="volleyball">排球
</body>

<script type="text/javascript">
    //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
    $.extend({
        max:function (a,b) {
            //返回两数中的最大值
            return a>=b ? a:b;
        },
        min:function (a,b) {
            //返回两数中的最小值
            return a<=b ? a:b;
        }
    });

    //调用全局方法
    var max = $.max(2,3);
    alert(max);

    var min = $.min(1,2);
    alert(min);
</script>