js实例，jquery

最新推荐文章于 2022-12-16 08:30:00 发布

Relaxaaa

最新推荐文章于 2022-12-16 08:30:00 发布

阅读量128

点赞数

分类专栏： html 文章标签： jquery

本文链接：https://blog.csdn.net/Relaxaaa/article/details/113539006

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

正则表达式

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字之外的任何字符，等价于[^0-9]
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W	任何非单字字符，等价于[^a-zA-z0-9_]
.	除了换行符之外的任意字符

符号	描述
{n}	匹配前一项n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但是不能超过m次
*****	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
？	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

表单验证

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .broRed{
            border-color: red;
        }
    </style>
    <script>
        //账号不能为空长度为6
        function user(t) {
            var u1 = document.getElementById(t.id + "1");
            //可以使用正则表达式进行验证
            if(t.value.length!=6){
                u1.innerHTML="长度应为6位";
                u1.className="";
                u1.classList.add("red")
            }else{
                u1.innerHTML="格式正确";
                u1.className="";
                u1.classList.add("green")
            }
            t.classList.remove("broRed");
        }

        function bor(t){
             t.select();
            t.classList.add("broRed");
        }
    </script>
</head>

<body>
    <form action="">
        账号：<br>
        <input type="text" name="username" id="u" onblur="user(this)" onfocus="bor(this)"  placeholder="请输入账号"><span id="u1"></span><br>
        密码：<br>
        <input type="password" name="password" id="p1"><span id="p11"></span><br>
        再次输入：<br>
        <input type="password" name="passwordAgain" id="p2"><span id="p21"></span>
    </form>
</body>
</html>

省市二级联动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <select name="select1" id="s1" onchange="s1change(this)">
        <option value="">====请选择====</option>

    </select>

    <select name="select2" id="s2">
        <option value="">====请选择====</option>

    </select>
</body>
<script>
    //先创建保存省的数组
    var province = ["河北省", "河南省", "黑龙江省"];
    var city = new Array();
    city["河北省"] = ["石家庄", "邯郸", "衡水"];
    city["河南省"] = ["周口", "郑州", "信阳"];
    city["黑龙江省"] = ["佳木斯", "抚远", "漠河"];

    //将省集合中数据添加到指定下拉框中
    var s1 = document.getElementById("s1");
    province.forEach(element => {
        var op = new Option(element, element);
        s1.add(op, null);
    });
    function s1change(t) {
        //根据省下拉框选择将市下拉框填入相应数据
        var s2 = document.getElementById("s2");
        s2.innerHTML = "";
        city[t.value].forEach(element => {
            var op = new Option(element, element);
            s2.add(op, null);
        });
    }
</script>
</html>

jquery

JavaScript库:这些JavaScript库封装了很多预定义的对象及实用函数，能帮助开发人员快速、轻松的实现高难度的富客户端页面，并能兼容大部分浏览器

本质就是使用js书写的方法集合，将我们日常使用js操作的对象与方法进行进一步封装，使其更加简洁方便

jQuery优点：

jQuery是创建于2006年1月的开源项目，主要包括核心库、UI和插件三部分，其优点有：
轻量级
　jQuery非常轻巧，核心库大小不到100K。
强大的选择器
　选择器是进行JavaScript编程的基础，而jQuery提供了功能全面、强大、灵活的选择器供开发者使用。
出色的DOM封装
　jQuery封装了大量的DOM操作，使原本复杂的的DOM操作变得非常简单。

可靠成熟的事件处理机制
　jQuery的事件处理机制充分吸收了循序渐进、非侵入式等优秀的编程思想，非常稳定可靠，便于使用。
非侵入式的设计使得行为层和表现层互相分离，有利于管理维护。
优秀的浏览器兼容性
　作为一个流行的JavaScript库，浏览器的兼容性是必须具备的硬性标准。jQuery能够在IE 6.0+、FF 2+、Safari 2+、Opera 9+和Chrome下正常运行。
链式操作方式
链式操作是指对发生在同一jQuery对象上的一组动作，可以直接连写而无需重复获得对象，这是jQuery的特色，使得jQuery编码无比优雅。
丰富的插件支持

为了避免js在页面dom元素加载前执行，所以在使用jquery进行功能实现时，一般将书写的代码书写在$（function(){ js代码 }）中

    <script>
        //js中当页面加载结束后（页面所有元素包含图片）执行
        // window.onload = function () {
        //      document.getElementById("d1").innerHTML = "asdasdasd";
        // }

        //jquery当页面准备好(标签被加载之后)后执行
        // $(document).ready(function(){
        //     document.getElementById("d1").innerHTML = "asdasdasd";
        // })
        // $(document).ready(function(){
        //    alert("aaa")
        // })
      $( function (){
          alert("aaa");
          //原本书写在script标签中的js代码
      })
    </script>

jquery基本选择器

jquery仿照css进行标签样式选择从而使用简洁的语法快速的获取想要操作的标签对象

基本选择器	说明
#id	根据CSS id选择器的名字来获取页面元素，相当于document.getElementById( )
.class	根据CSS类选择器的名字来获取页面元素
element	根据CSS标签选择器的名字来获取页面元素，相当于document.getElementsByTagName( )
*****	获取页面所有元素
selector1,selector2, …	获取每一个选择器所匹配的元素

jquery获取的标签对象与js直接获取的标签对象存在不同，可以理解为jquery对原标签对象进行了封装，获取的是由原标签对象创建的相应jquery对象

val( ): 用来获得元素value属性的值
html( ):用来获得元素标签内的所有信息，包括标签和文本，相当于DOM中的innerHTML
size( )：用来获得集合/数组的长度
1.8之后改为.length属性

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象

juqery对象转换为dom对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.

var $jqueryObj=$("#id");
var domObj=$jqueryObj[0];

(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象

var $jqueryObj=$("#id");
var domObj=$jqueryObj.get(0);

dom对象转换为jquery对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象.

var domObj=document.getElementById("id");
var $jqueryObj=$(domObj);

jquery each方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#b1").click(function(){
                $("input").each(function(){
                    if(this.type=="text"){
                        //jquery对象遍历获取this代表对应dom对象
                        this.value="";
                    }
                })

            })
        })
    </script>
</head>
<body>
    <!-- 使用jquery  each方法实现输入框的清空 -->
<input type="text" value="16">
<input type="text"  value="15">
<input type="text"  value="14">
<input type="text" value="13">
<input type="text" value="13">
<input type="text" value="12">
<input type="button" id="b1" value="清空">
</body>
</html>

jquery其他选择器

在进行jquery对象标签对象进行选择时，有时需要使用复杂的关系进行获取，或某种限制条件下的标签，这时候基本的选择器以及不足以满足，所以jquery根据css一样设置了很多不同条件进行获取的选择器

层次选择器

根据元素标签层次进行选择，注意选择标签层级关系

层次选择器	说明
$(“a b”)	匹配并获取a元素里的所有后代b元素
$(“parent > child”)	匹配并获取parent元素里的子元素
$(“prev + next”)	匹配并获取紧挨着prev元素后的next元素
$(“prev ~ siblings”)	匹配并获取prev元素后的所有siblings元素

属性选择器

根据指定的属性或拥有属性的值进行选择

属性选择器	说明
$(" selector [ attr ] ")	获取匹配selector选择器的并且拥有attr属性的元素
$(" selector [ attr =’ val ’ ] ")	获取匹配selector选择器的并且attr属性的值是val的元素
$(" selector [ attr !=’ val ’ ] ")	获取匹配selector选择器的并且attr属性的值不是val的元素
$(" selector [ attr ^=’ val ’ ] ")	获取匹配selector选择器的并且attr属性的值是以val开始的元素
$(" selector [ attr $=’ val ’ ] ")	获取匹配selector选择器的并且attr属性的值是以val结尾的元素
$(" selector [ attr *=’ val ’ ] ")	获取匹配selector选择器的并且attr属性的值包含val的元素
$(" selector [ ] [ ] [ ] …")	属性选择器组合

表单选择器

可以理解为属性选择器的另一种语法，主要是针对于表单元素进行类型的快速选择

名称	说明
:input	匹配并获得表单中所有input, textarea, select和button元素
:text	匹配并获得所有的文本框
:password	匹配并获得所有密码框
:radio	匹配并获得所有单选按钮
:checkbox	匹配并获得所有复选框
:submit	匹配并获得所有提交按钮
:image	匹配并获得所有图片
:reset	匹配并获得所有重置按钮
:button	匹配并获得所有按钮
:file	匹配并获得所有文件域
:hidden	匹配并获得所有隐藏域

表单属性选择器

根据表单的一些特有属性与其对应的值进行选择

一般与input标签一起使用例如 $(“input:checked”)

名称	说明
:enabled	匹配并获得所有正常使用的元素
:disabled	匹配并获得所有禁用的元素
:checked	匹配并获得所有被选中的复选框
:selected	匹配并获得下拉列表框的选中项

内容选择器

根据起始与结束标签中的文本内容进行匹配

名称	说明
:contains	匹配并获得包含有txt文本的元素
:empty	匹配并获得没有子元素或者文本的元素
:has(属性选择器语法)	匹配并获得包含有selector选择器的元素

过滤选择器

过滤选择器一般与其他选择器一起使用，由其他的选择器先将指定类型的标签进行选择，之后交由过滤选择器进一步进行过滤选择（通过索引）

名称	说明
:first	获得匹配到的第一个元素
:last	获得匹配到的最后一个元素
:not ( selector )	获得除了匹配的元素之外的元素
:even	匹配所有索引值为偶数的元素，从0开始计数
:odd	匹配所有索引值为奇数的元素，从0开始计数
:eq ( index )	匹配一个给定索引值的元素，从0开始计数
:gt ( index )	匹配所有大于给定索引值的元素，从0开始计数
:lt ( index )	匹配所有小于给定索引值的元素，从0开始计数

可见性选择器

根据标签是否课件进行选择

名称	说明
:hidden	匹配所有的隐藏元素
:visible	匹配所有的可见元素

注意事项

选择器中含有"."、"#"、"("、"]"特殊符号
根据W3C的规定，属性的值中是不能含有一些特殊字符的

jquery如果按照以下写法是得不到结果的

<div id="t#b">I Love jQuery</div>
<div id="t[1]"></div>
$("#t#b").html();
$("#t[1]").html();

通过转义字符\来解决这个问题

$("#t\\#b").html();
$("#t\\[1\\]").html();

选择器中的空格

document.write($(".test :hidden").length);  //选择器中包含空格
document.write($(".test:hidden").length);  //选择器中没有空格

jquery事件

在html中事件的使用需要提前书写在相应的标签中，通过事件=函数进行方法的自动调用，但是事件属于js会造成在html中添加的js的代码，不符合html css js独立运行互不影响的特性，所以jquery对于事件处理额外更新了很多方法，可以与选择器一起使用，实现事件的书写脱离html

jQuery事件	说明
ready( fn )	页面加载完毕时发生的事件
blur( [ [data] , fn ] )	元素失去焦点时发生的事件
change( [ [data] , fn ] )	元素的值发生改变时发生的事件
click( [ [data] , fn ] )	单击鼠标时发生的事件
dblclick( [ [data] , fn ] )	双击鼠标时发生的事件
focus( [ [data] , fn ] )	元素获得焦点是发生的事件
keydown( [ [data] , fn ] )	按下键盘时发生的事件
keyup( [ [data] , fn ] )	松开键盘时发生的事件
keypress( [ [data] , fn ] )	按下并松开键盘时发生的事件
mousedown( [ [data] , fn ] )	按下鼠标按钮时发生的事件
mousemove( [ [data] , fn ] )	鼠标移动时发生的事件
mouseout( [ [data] , fn ] )	鼠标离开某元素时发生的事件
mouseover( [ [data] , fn ] )	鼠标悬浮到某元素上时发生的事件
mouseup( [ [data] , fn ] )	松开鼠标按钮时发生的事件
scroll( [ [data] , fn ] )	页面滚动时发生的事件
select( [ [data] , fn ] )	input元素的选取事件

通过选择器选择要添加事件的标签，通过事件绑定方法进行依次绑定

鼠标事件	说明
mousedown( [ [data] , fn ] )	按下鼠标按钮时发生的事件
mousemove( [ [data] , fn ] )	鼠标移动时发生的事件
mouseout( [ [data] , fn ] )	鼠标离开某元素时发生的事件
mouseover( [ [data] , fn ] )	鼠标悬浮到某元素上时发生的事件
mouseup( [ [data] , fn ] )	松开鼠标按钮时发生的事件

jQuery键盘事件	说明
keydown( [ [data] , fn ] )	按下键盘时发生的事件
keyup( [ [data] , fn ] )	松开键盘时发生的事件
keypress( [ [data] , fn ] )	跟keydown差不多，也是按下键盘时发生的事件

合成事件

hover:模拟鼠标悬停事件
jQuery对象 . hover ( fn1 , fn2 )

鼠标移入执行fn1，移出执行fun2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        div {
            height: 300px;
            width: 300px;
            background-color: violet;
        }
        .c{
            background-color: steelblue;
        }
    </style>
    <script>
        $(function () {
            //模拟鼠标移入移出事件 
            //移入执行第一个函数  移出执行第二个函数 
            $("div").hover(function(){
               $(this).addClass("c")
            },function(){
                $(this).removeClass("c")
            })
        })
    </script>

</head>
<body>
    <div>
    </div>
</body>
</html>

toggle:连续单击事件
jQuery对象.toggle(fn1,fn2…fnn)

jquery事件绑定与解绑

在进行事件操作时需要首先获取指定标签对象之后进行绑定，但是页面的html不是固定，可以通过js或jquery进行动态的添加，对于新添加的标签而言就不存在绑定操作，事件绑定就是将指定符合要求的标签与事件方法进行绑定，即使页面新添加标签也会进行绑定

函数名	说明
on	jQuery1.7版本中新增的事件绑定函数，用来逐步替代bind和live，性能更好
off	用来移除某元素的事件，与on相反

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        div {
            height: 300px;
            width: 300px;
            background-color: violet;
        }
    </style>
    <script>
        $(function () {
            $("div").on("click", function () {
                alert("点击")
            })
            $("div").on("mousemove", function () {
                alert("移动")
            })

            $("button").click(function(){
                alert("去除绑定")
                $("div").off();
                //$("div").off("mousemove");
                //移除所有事件
            })
        })
    </script>
</head>
<body>
    <div>
    </div>
    <button>去除点击事件</button>
</body>
</html>

使用jquery实现拖拽效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        div {
            height: 200px;
            width: 200px;
        }


        .d1 {
            background-color: teal;
        }

        .d2 {
            background-color: red;
        }

        .abs {
            position: absolute;
        }


        body {
            margin: 0px;
        }
    </style>
    <script>
        $(function () {
            // $(document).mousedown(
            //     function (e) {
            //         $("#begin").html("起始位置:" + e.pageX + "," + e.pageY);
            //     }
            // )

            // $(document).mouseup(
            //     function (e) {
            //         $("#end").html("结束位置:" + e.pageX + "," + e.pageY);
            //     }
            // )


            $("div").on("mousedown", function (e) {
                //记录鼠标按下时x与y的位置
                var mouseLeft = e.pageX;//鼠标初始距左位置
                var mouseTop = e.pageY;//鼠标初始距上位置

                //记录div位置
                var divLeft = this.style.left;
                var divTop = this.style.top;

                if (divLeft.indexOf("px") == -1) {
                    divLeft = 0;
                } else {
                    divLeft = parseInt(divLeft.substring(0, divLeft.indexOf("px")));
                }
                if (divTop.indexOf("px") == -1) {
                    divTop = 0;
                } else {
                    divTop = parseInt(divTop.substring(0, divTop.indexOf("px")))
                }

                var d = this;
                $(document).mousemove(
                    function (e) {
                        $(d).addClass("abs");
                        var mouseNowLeft = e.pageX;//鼠标移动后距左位置
                        var mouseNowTop = e.pageY;//鼠标移动后距上位置
                        //$("#now").html("移动距离位置,右移:" +(mouseNowLeft-mouseLeft) + ",下移:" + (mouseNowTop-mouseTop));
                        d.style.left = divLeft + (mouseNowLeft - mouseLeft) + "px";
                        d.style.top = divTop + (mouseNowTop - mouseTop) + "px";
                    }
                )
            });
            $("div").on("mouseup", function () {
                $(document).off()
            });
             var current =0;
           
            
            window.setInterval(function(){
                current = (current+10)%360;
                $("div")[0].style.transform = 'rotate('+current+'deg)';
            },1)
        })
    </script>

</head>

<body>

   <div>
    <div class="d1"></div>
    <div class="d2"></div>
   </div>
</body>
</html>

Relaxaaa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实例，jquery

正则表达式符号描述/…/代表一个模式的开始和结束^匹配字符串的开始$匹配字符串的结束\s任何空白字符\S任何非空白字符\d匹配一个数字字符，等价于**[0-9]**\D除了数字之外的任何字符，等价于**[^0-9]**\w匹配一个数字、下划线或字母字符，等价于**[A-Za-z0-9_]**\W任何非单字字符，等价于**[^a-zA-z0-9_]**.除了换行符之外的任意字符符号描述{n
复制链接

扫一扫