-
JS扩展
-
alert（）:只有确定按钮的提示框
-
confirm():包含确定和取消两个提示框
-
取消默认 return false;
JQUery
-
$是jQuery，jQuery函数引用
-
$()是触发（调用） 核心函数
-
传入参数为函数时：$(fuction(){})类似与window.onload作用相同
-
传入参数为选择器字符串时：$(选择器字符串)
? ? ? //类似window.onload
? ? ? ?$(function (){
? ? ? ? ? ?//通过id获取元素，并且关联点击事件
? ? ? ? ? ?$("#sss").click(function (){
? ? ? ? ? ? ? ?alert("起飞");
? ? ? ? ? });
? ? ? });
? ?</script>
</head>
<body>
<button id="sss">hello</button> -
传入参数为HTML字符串时：$(HTML字符串)，创建HTML元素节点
? ? ?$(function (){
? ? ? ? ? ? var $h = $("<li>贵州</li>");
? ? ? ? ? ?$("#city").append($h);
? ? ? ? ? })
? ?</script>
</head>
<body>
<button id="sss">hello</button>
<ul id="city">
? ? <li>上海</li>
? ? <li>北京</li>
? ? <li>广东</li>
? ? <li>重庆</li>
</ul> -
传入参数为DOM对象时：$(DOM对象)，江DOM对象转换成jQurey对象
$(function (){
? ?//创建一个DOM的对象
? ?var h = document.getElementById("sss");
? ?alert(h);
? ?//创建一个jQuery对象
? ?var $b = $(sss);
? ? alert($b);
? ? ?//将DOM对象转换成jQuery对象
? ? ? ? ? ?var $x = $(h);
? ? ? ? ? ?alert($x)
}) -
DOM对象和JQuery对象之间的相互转换并调用方法
? ?<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
? ?<script type="text/javascript">
?
? ? ? ? ? ?$(function (){ //这一步相当于wendow.onload
? ? ? ? ? ? ? ?//用DOM对象调用DOM方法(//每一个按钮都要输出前车之鉴，后车之师)
? ? ? ? ? ? ? ?$("#ss").click(function (){ //将点击事件关联
? ? ? ? ? ? ? ? ? ?var ss = document.getElementById("cc");//取出id元素
? ? ? ? ? ? ? ? ? ?alert(ss.innerText);///nnerText是输出文本
? ? ? ? ? ? ? ? ? ?//用jQuery对象调用JQuery方法
? ? ? ? ? ? ? ? ? ?$("#zz").click(function (){
? ? ? ? ? ? ? ? ? ? ? ?var zz = $("#cc").text();
? ? ? ? ? ? ? ? ? ? ? ?alert(zz)
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ?//用DOM对象调用JQuery方法
? ? ? ? ? ? ? ? ? ?$("#bb").click(function (){
? ? ? ? ? ? ? ? ? ? ? ? var bb = document.getElementById("cc");//DOm对象
? ? ? ? ? ? ? ? ? ? ? ? //进行转换
? ? ? ? ? ? ? ? ? ? ? ?var $s = $(bb);
? ? ? ? ? ? ? ? ? ? ? ?alert($s.text());
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ?//用JQuery对象调用DOM方法
? ? ? ? ? ? ? ? ? ?$("#ee").click(function (){
? ? ? ? ? ? ? ? ? ? ? ?var ee = $("#cc")
? ? ? ? ? ? ? ? ? ? ? ? ?var e = ee[0]; //将JQuery看成数组 用这种方式转换
? ? ? ? ? ? ? ? ? ? ? ? //var e = ee.get(0);
? ? ? ? ? ? ? ? ? ? ? ?alert(e.innerText)
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? });
? ? ? ? ? });
?
? ?</script>
</head>
<body>
<div id="cc">前车之鉴，后车之师</div><br>
<button id="ss">用DOM对象调用DOM方法</button>
<button id="zz">用jQuery对象调用JQuery方法</button>
<button id="bb">用DOM对象调用JQuery方法</button>
<button id="ee">用JQuery对象调用DOM方法</button>
</body>
</html> 总结DOM对象与jQuery对象的转换
-
DOM对象转换为jQuery对象：
-
JQuery对象转换为DOM对象（将jQuery对象看成数组或集合）
jQuery选择器
-
看文档！
Jquery 操作DOM
-
JQuery操作标签
-
增
-
删
-
改
-
replaceWith()
-
replaceall()
-
查
-
JQuery操作属性
-
attr(""):获取指定属性值
-
attr（“”，“”）：为指定属性赋值
-
prop（）：同上（升级版）
-
JQuery操作文本
-
JQuery操作样式表
-
css(""): 获取指定样式表
-
css("",") 为指定元素设置样式表
-
addClass（）
-
removeClass（）
-
jQuery常用事件
正则表达式
-
正则表达式：一组验证数据规则
-
语法结构为：var a = /^[规则]{n,m}/；
-
/a/:表示要含有a，a的位置不限
-
/^a/:表示以a开头的才可以
-
/a$/：表示以a结尾的才可以
-
/ab/: 表示出现ad才可以（ab不可以分开，顺序不能换）
-
/[ab]/:表示出现a或者b其中一个都可以
-
/[a-z]/:表示出现a到z字母中的一个都可以
-
/[a-zA-Z]/:表示出现a-z中的一个（可以出现大写）都可以
-
/[0-9]/：表示出现0-9的数组都可以
-
/[_]/：表示出现下划线都可以
-
/{2.9}/:表示用户名或者密码长度要在[2.9]之间
-
/{6}/:表示用户名或者密码长度只能是6
-
/{6，}/:表示用户名或者密码长度>=6
-
验证
-
特殊规则
-
特殊字符
-
\d:等价于[0-9]
-
\w:等价于[a-zA-Z0-9]
-
. ： 匹配除\n任何字符
-
特殊 次数
-
*等价于{0,}匹配任意次
-
？等价于{0,1} 匹配0次或1次
-
-
-
-