jQuery

1. 简介

jQuery是一个快速、简洁的JavaScript代码库（框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性:
a.具有独特的链式语法和短小清晰的多功能接口；
b.具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；
c.拥有便捷的插件扩展机制和丰富的插件。

2. 引入

下载：https://jquery.com/

直接引入：
<head><script type="text/javascript" src="js/jquery-2.1.0.js" ></script> </head>
CDN引入：
1.百度 CDN
<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
2.新浪 CDN
<head><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>

3. jQuery准备函数

 1.概念:在页面加载完成之后,所触发事件(html标签的雏形加载完成(不包括音频视频)) 
2.jquery语法: $ 关键字 
3.特点
 A.jquery中的准备函数有多种写法
 B.jquery优先js中准备函数先执行
 C.jquery中的准备函数可以执行多次

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <!-- <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> -->
</head>
<body>
    <script>
        window.onload= function() {
            console.log("准备函数-01");
        }
 
        window.onload= function() {
            console.log("准备函数-02");
        }
 
        $(document).ready(function(){
            console.log("jquery准备函数-01");
        });
 
        $(function(){
            console.log("jquery准备函数-02")
        });
    </script>
</body>
</html>

4. jQuery和js之间相互转换

 1.js与jquery 不能互相调用其方法与属性 必须进行转换 
2.js ==> jquery 语法: $(js对象) 
3.jquery对象转换为js对象 
 A.jquery对象.get(0) 
 B.jquery[0]

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
    <input type="text" id="uName" value="认真听课">
    <input type="button" id="uname" value="" onclick="showInfo()">
    <script>
        function showInfo() {
            // 获取节点对象js
            var uName = document.getElementById("uName");
 
            // 将js对象转换为 jquery对象
            var $uName = $(uName);
            // 将jquery对象转为js对象（一）
            var u = $uName.get(0);
            // 将jquery对象转为js对象（二）
            var t = $uName[0];
            console.log(t.value);
        }
    </script>
</body>
</html>

5. jQuery中三种基本选择器

选择器名称	描述
id选择器	$("#选择器名称")
$("#选择器名称")标签选择器	$("标签名称")
类选择器	$(".类名称")

     <input type="button" value="点击" onclick="showInfo()"/>
    <input type="text" id="uName"/>
    <p>
        <input type="checkbox" name="hobby" value="爱好一"/>爱好一
        <input type="checkbox" name="hobby" value="爱好二"/>爱好二
        <input type="checkbox" name="hobby" value="爱好三"/>爱好三
    </p>
    <p>
        <input type="radio" name="sex" class="sexClz" value="男">男
    </p>
 
    <script>
        function showInfo(){
            // id选择器
            $("#uName").val();
            // 标签选择器
            $("input");
            // 类选择器
            $(".sexClz");
        }
    </script>

6. jQuery中的事件

 注意：jquery中的事件 没有 on前缀
A.blur 失去焦点 
B.focus 获取焦点 
C.mouseout 鼠标移出 
D.mouseover 鼠标移入 
E.hover() 移入与移出 
F.click() 点击事件 
G.dblclick() 双击事件

 $("#").click(function(){
	alert("一起玩");
});
 
$("p").mouseover(function(){
	console.log("鼠标移入")
});
$("p").hover(function(){
	console.log("鼠标移入")
},function(){
	console.log("鼠标移出")
});
$("#ipt").focus(function(){
	$(this).css({"backgorund-color":"red"})
});

7. jQuery动画

7.1. 显示-隐藏

方法名称	方法描述
show(speed,callback)	显示(speed 显示的速度,显示完成后所执行的函数名称)
hide(speed,callback)	隐藏(speed 显示的速度,显示完成后所执行的函数名称)
toggle(speed,callback)	显示隐藏(speed 显示的速度,显示完成后所执行的函数名称)

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    先点击隐藏
    <input type="button" name="" id="btn1" value="显示">
    <input type="button" name="" id="btn2" value="隐藏">
    <input type="button" name="" id="btn3" value="显示与隐藏">
    <div></div>
 
    <script>
        $("#btn1").click(function(){
            $("div").show(2000,function(){
                alert("显示耗时2s");
            });
        });
        $("#btn2").click(function(){
            $("div").hide(1000,function(){
                alert("隐藏耗时1s");
            });
        });
        $("#btn3").click(function(){
            $("div").toggle(3000);
        });
    </script>
</body>
</html>

7.2. 淡入-淡出

方法名称	方法描述
fadeIn(speed,callback)	淡入(speed 淡入的速度,淡入完成后所执行的函数名称)
fadeOut(speed,callback)	淡出(speed 淡出的速度,淡入完成后所执行的函数名称)
fadeToggle(speed,callback)	淡入淡出(speed 淡出的速度,淡入完成后所执行的函数名称)

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <p>先点击淡出</p>
    <input type="button" id="btn1" value="淡入"/>
    <input type="button" id="btn2" value="淡出"/>
    <input type="button" id="btn3" value="淡入淡出"/>
    <div></div>
 
    <script>
        $("#btn1").click(function(){
            $("div").fadeIn(1000,function(){
                alert("用了1s时间淡入");
            });
        });
 
        $("#btn2").click(function(){
            $("div").fadeOut(2000,function(){
                alert("用了2s时间淡出");
            });
        });
 
        $("#btn3").click(function(){
            $("div").fadeToggle(3000);
        });
    </script>
</body>
</html>

7.3. 滑动效果

方法名称	方法描述
slideDown(speed,callback)	向下滑动
slideUp(speed,callback)	向上滑动
slideToggle(speed,callback)	向上与向下滑动

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <p>先点击向上滑动，收起来</p>
    <input type="button" id="btn1" value="向下滑动"/>
    <input type="button" id="btn2" value="向上滑动"/>
    <input type="button" id="btn3" value="向上向下滑动"/>
    <div></div>
 
    <script>
        $("#btn1").click(function(){
            $("div").slideDown(1000,function(){
                alert("向下滑动用时1s");
            });
        });
 
        $("#btn2").click(function(){
            $("div").slideUp(2000,function(){
                alert("向上滑动用时2s");
            });
        });
 
        $("#btn3").click(function(){
            $("div").slideToggle(3000);
        });
    </script>
    
</body>
</html>

7.4. 自定义动画

 语法: 
$(selector).animate({ 
    "属性名":属性值, 
    "属性名":"属性值" 
})

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: salmon;
            /* 一定要加上定位 */
            position: relative;
        }
    </style>
</head>
<body>
    <div>一个块级元素</div>
    <input type="button" id="btn" value="点击">
    <script>
        $("#btn").click(function(){
            $("div").animate({
                "left":"100px",
                "opacity":"0.3", // 设置透明度
                "width":"+=100px",
                "height":"+=100px",
                "height":"toggle"
            })
        });
    </script>
</body>
</html>

8. jQuery操作DOM

8.1. 操作节点

方法名称	方法描述
val()	获取与设置值
text()	设置与获取标签中间内容(不能识别标签)
html()	设置与获取标签中间内容(能识别标签)
prop()	设置获取标签的属性

 <body>
    <div id="did"></div>
    <input type="text" id="inid1">
    <input type="button" name="" id="inid2" value="点击">
    <input type="button" name="" id="inid3" value="设置">
    <input type="button" name="" id="inid4" value="获取">
 
    <script>
        // 点击“设置”，“点击”按钮失效
        $("#inid3").click(function(){
            $("#inid2").prop("disabled",true);
        });
 
        // 点击“获取”，弹出“点击”按钮的属性值
        $("#inid4").click(function(){
            alert($("#inid2").prop("disabled"));
        });
    </script>
</body>

8.2. 增加元素

方法名称	方法描述
append()	后面追加
prepend()	前面追加
after()	后面追加
before()	前面追加

 append/prepend 是在选择元素内部嵌入。 after/before 是在元素外面追加。

 <body>
    <p>段落p</p>
    <input type="button" name="" id="btn" value="点击">
    <script>
        $("#btn").click(function(){
            // $("p").append("append后面追加一句话");
            // $("p").prepend("prepend前面追加一句话");
            // $("p").after("after后面追加一句话");
            $("p").before("before前面追加一句话");
        })
    </script>
</body>

8.3. 删除元素

方法名称	方法说明
remove()	删除被选元素（及其子元素）(删除自身以及其子元素)
empty()	删除子元素

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            border: solid 2px rosybrown;
        }
    </style>
</head>
<body>
    <input type="button" name="" id="btn1" value="点击1"/>
    <input type="button" name="" id="btn2" value="点击2"/>
    <div id="did">
        <p>段落p</p>
    </div>
    <script>
        $("#btn1").click(function(){
            $("#did").empty(); // 删除子元素。只是删除里面的文字
        });
 
        $("#btn2").click(function(){
            $("#did").remove(); // 删除被选元素（及其子元素）。连同样式也一起删除了
        })
    </script>
</body>
</html>

9. jQuery操作样式

9.1. 操作类样式

方法名称	方法描述
addClass()	增加类样式
removeClass()	删除类样式
toggleClass()	增加与删除类样式

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        .getClass{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <input type="button" name="" id="btn1" value="增加类的样式"/>
    <input type="button" name="" id="btn2" value="删除类的样式"/>
    <input type="button" name="" id="btn3" value="增加和删除类的样式"/>
    <div>一个div</div>
 
    <script>
        $("#btn1").click(function(){
            $("div").addClass("getClass");
        });
 
        $("#btn2").click(function(){
            $("div").removeClass("getClass");
        });
 
        $("#btn3").click(function(){
            $("div").toggleClass("getClass");
        });
    </script>
</body>
</html>

9.2. 操作css样式

 $("选择名称").css("属性名","属性值"); 设置单个 
$("选择名称").css({"属性名":"属性值","属性名":"属性值",...});

 <body>
    <p>一个段落p</p>
    <input type="button" id="btn" value="点击改变css样式"/>
    <script>
        $("#btn").click(function(){
            $("p").css({"color":"red","font-size":"200%"});
        });
    </script>
</body>

10. jQuery其他选择器

10.1. 层级选择器

语法	说明
parent child	parent元素包儿子包孙子
parent > child	parent元素包儿子不包括孙子
prve + next	prve第一个div兄弟元素
prve ~ next	所有的prve兄弟元素

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
    <input type="button" name="" id="btn" value="点击">
    <div id="did">
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444
            <span>555</span>
        </div>
        <span>666
            <div>777</div>
        </span>
        <span>aaa</span>
        bbb
        <div>ccc</div>
        <span></span>
    </div>
    <div>888</div>
    <div>999</div>
 
    <script>
        $("#btn").click(function(){
            var arrays = $("#did div");
            var arrays = $("#did > div");
            var arrays = $("#did ~ div");
 
            for(var i = 0;i < arrays.length;i++) {
                alert($(arrays[i]).text());
            }
            alert($("#did + div").text())
        });
    </script>
</body>
</html>

10.2. attribute属性选择器

 - [attribute] 选择器选取带有指定属性的每个元素。
语法：$("[attribute]")
- [attribute=value] 选择器选取带有指定属性和值的每个元素。
语法：$("[attribute=value]")
- [attribute!=value] 选择器选取每个不带有指定属性和值的元素。带有指定的属性，但不带有指定的值的元素，也会被选择。
语法：$("[attribute!='value']")
- [attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。
语法：$("[attribute$='value']")
- *=、~=、|=、^=等等

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
    <a href="#">你好</a>
    <a href="#">世界</a>
    <a href="admin.html">admin</a>
    <a href="login.html">login</a>
    <a href="aa.html">aa</a>
    <a href="bb.html">bb</a>
    <a href="cc.html">cc</a>
    <a>嗯</a>
    <input type="button" name="" id="btn" value="点击">
 
    <script>
        $("#btn").click(function(){
            // var arrays = $("[href]");
            // var arrays = $("[href='#']");
            var arrays = $("[href^='a']"); // 以a开头的
            for(var i = 0;i < arrays.length;i++) {
                alert($(arrays[i]).html());
            }
        });
    </script>
</body>
</html>

10.3. 过滤选择器

语法	描述
$("p:first")	选取第一个 p 元素
$("p:last")	选取最后一个 p 元素
$("tr:even")	选取偶数位置的 tr 元素
$("tr:odd")	选取奇数位置的 tr 元素
$(":eq(index)")	选取带有指定 index 值的元素
$(":gt(index)")	选取 index 值大于指定数字的元素
$(":lt(index)")	选取 index 值小于指定数字的元素
$(":not(selector)")	选取除了指定元素以外的所有元素
...	...

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body> 
    <input type="button" id="btn" value="点击">
    <div>1号元素</div>
    <div>2号元素</div>
    <div>3号元素</div>
    <div>4号元素</div>
    <div>5号元素</div>
    <div>6号元素</div>
    <div>7号元素</div>
    <div>0号元素</div>
   
    <script>
        $("#btn").click(function(){
            alert($("div:first").html()); //选择第一个div元素，html一定要加()
            alert($("div:last").html()); //选择最后一个div元素
            // var arrays = $("div:even"); //even偶数，odd奇数
            // for(var i = 0;i<arrays.length; i++){
            //     console.log($(arrays[i]).html());
            // }
        });
    </script>
</body>
</html>

11. jQuery Validation表单验证-插件

 1. 必须先导入jQuery核心js
2. 然后导入jQuery Validation核心js
3. 最后导入中文提示信息js

 <!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- jQuery核心js -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- jQuery Validation核心js -->
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <!-- 中文提示信息js -->
    <script type="text/javascript" src="js/messages_zh.js"></script>
    <style>
        label {
            color: red;
        }
    </style>
</head>
 
<body>
    <form id="f1">
        <table border="1" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3">
                    <font color="cornflowerblue" size="5">测试表单</font>
                </td>
            </tr>
            <tr>
                <td>用户名（必填字段，长度范围6~10）</td>
                <td colspan="2"> <input type="text" name="username" /> </td>
            </tr>
            <tr>
                <td>Email（符合邮件格式）</td>
                <td colspan="2"> <input type="text" name="email" /> </td>
            </tr>
            <tr>
                <td>出生日期（日期格式）</td>
                <td colspan="2"> <input type="text" name="birthday" /> </td>
            </tr>
            <tr>
                <td>薪资（数字）</td>
                <td colspan="2"> <input type="text" name="sal" /> </td>
            </tr>
            <tr>
                <td>一天工作时长（值范围6~16）</td>
                <td colspan="2"> <input type="text" name="workForday" /> </td>
            </tr>
            <tr>
                <td>密码（必须填写）</td>
                <td colspan="2"> <input type="text" name="pwd" id="pwd" /> </td>
            </tr>
            <tr>
                <td>确认密码（必须填写，且与密码值要相同）</td>
                <td colspan="2"> <input type="text" name="repwd" /> </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"> <input type="submit" value="注册" /> </td>
            </tr>
        </table>
    </form>
 
    <script>
        $(document).ready(function(){ // 页面结构加载完执行function
            $("#f1").validate({
                rules:{
                    username:{
                        required:true,
                        rangelength:[6,10]
                    },
                    email:{
                        email:true
                    },
                    birthday:{
                        dateISO:true
                    },
                    sal:{
                        number:true
                    },
                    workForday:{
                        range:[6,10]
                    },
                    pwd:{
                        required:true
                    },
                    repwd:{
                        equalTo:pwd
                    }
                },
                messages:{
                    username:{
                        required:"没有输入用户名"
                    },
                    workForday:{
                        range:"工作时间不足或过长"
                    }
                }
            });
        });
    </script>
</body>
 
</html>

上一篇JS(二)

下一篇练习题13-JS

本文作者：Ritchie里其

本文链接：https://www.cnblogs.com/wang-zeyu/p/16859991.html

posted @ 2022-11-05 12:49 Ritchie里其阅读(95) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Ritchie

jQuery

1. 简介

2. 引入

3. jQuery准备函数

4. jQuery和js之间相互转换

5. jQuery中三种基本选择器

6. jQuery中的事件

7. jQuery动画

7.1. 显示-隐藏

7.2. 淡入-淡出

7.3. 滑动效果

7.4. 自定义动画

8. jQuery操作DOM

8.1. 操作节点

8.2. 增加元素

8.3. 删除元素

9. jQuery操作样式

9.1. 操作类样式

9.2. 操作css样式

10. jQuery其他选择器

10.1. 层级选择器

10.2. attribute属性选择器

10.3. 过滤选择器

11. jQuery Validation表单验证-插件

公告

常用链接

我的标签

合集

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	1.概念:在页面加载完成之后,所触发事件(html标签的雏形加载完成(不包括音频视频))
	2.jquery语法: $ 关键字
	3.特点
	A.jquery中的准备函数有多种写法
	B.jquery优先js中准备函数先执行
	C.jquery中的准备函数可以执行多次

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
	<!-- <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> -->
	</head>
	<body>
	<script>
	window.onload= function() {
	console.log("准备函数-01");
	}

	window.onload= function() {
	console.log("准备函数-02");
	}

	$(document).ready(function(){
	console.log("jquery准备函数-01");
	});

	$(function(){
	console.log("jquery准备函数-02")
	});
	</script>
	</body>
	</html>

	1.js与jquery 不能互相调用其方法与属性必须进行转换
	2.js ==> jquery 语法: $(js对象)
	3.jquery对象转换为js对象
	A.jquery对象.get(0)
	B.jquery[0]

	<input type="button" value="点击" onclick="showInfo()"/>
	<input type="text" id="uName"/>
	<p>
	<input type="checkbox" name="hobby" value="爱好一"/>爱好一
	<input type="checkbox" name="hobby" value="爱好二"/>爱好二
	<input type="checkbox" name="hobby" value="爱好三"/>爱好三
	</p>
	<p>
	<input type="radio" name="sex" class="sexClz" value="男">男
	</p>

	<script>
	function showInfo(){
	// id选择器
	$("#uName").val();
	// 标签选择器
	$("input");
	// 类选择器
	$(".sexClz");
	}
	</script>

	注意：jquery中的事件没有 on前缀
	A.blur 失去焦点
	B.focus 获取焦点
	C.mouseout 鼠标移出
	D.mouseover 鼠标移入
	E.hover() 移入与移出
	F.click() 点击事件
	G.dblclick() 双击事件

	$("#").click(function(){
	alert("一起玩");
	});

	$("p").mouseover(function(){
	console.log("鼠标移入")
	});
	$("p").hover(function(){
	console.log("鼠标移入")
	},function(){
	console.log("鼠标移出")
	});
	$("#ipt").focus(function(){
	$(this).css({"backgorund-color":"red"})
	});

	语法:
	$(selector).animate({
	"属性名":属性值,
	"属性名":"属性值"
	})

	<body>
	<div id="did"></div>
	<input type="text" id="inid1">
	<input type="button" name="" id="inid2" value="点击">
	<input type="button" name="" id="inid3" value="设置">
	<input type="button" name="" id="inid4" value="获取">

	<script>
	// 点击“设置”，“点击”按钮失效
	$("#inid3").click(function(){
	$("#inid2").prop("disabled",true);
	});

	// 点击“获取”，弹出“点击”按钮的属性值
	$("#inid4").click(function(){
	alert($("#inid2").prop("disabled"));
	});
	</script>
	</body>

	<body>
	<p>段落p</p>
	<input type="button" name="" id="btn" value="点击">
	<script>
	$("#btn").click(function(){
	// $("p").append("append后面追加一句话");
	// $("p").prepend("prepend前面追加一句话");
	// $("p").after("after后面追加一句话");
	$("p").before("before前面追加一句话");
	})
	</script>
	</body>

	$("选择名称").css("属性名","属性值"); 设置单个
	$("选择名称").css({"属性名":"属性值","属性名":"属性值",...});

	<body>
	<p>一个段落p</p>
	<input type="button" id="btn" value="点击改变css样式"/>
	<script>
	$("#btn").click(function(){
	$("p").css({"color":"red","font-size":"200%"});
	});
	</script>
	</body>

	- [attribute] 选择器选取带有指定属性的每个元素。
	语法：$("[attribute]")
	- [attribute=value] 选择器选取带有指定属性和值的每个元素。
	语法：$("[attribute=value]")
	- [attribute!=value] 选择器选取每个不带有指定属性和值的元素。带有指定的属性，但不带有指定的值的元素，也会被选择。
	语法：$("[attribute!='value']")
	- [attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。
	语法：$("[attribute$='value']")
	- *=、~=、\|=、^=等等

	1. 必须先导入jQuery核心js
	2. 然后导入jQuery Validation核心js
	3. 最后导入中文提示信息js