javaweb学习笔记2
javascript_1">javascript正则表达式
regfxp对象
方式1：
var putt=new RegExp("e");//表示要求字符串中必须包含字符串e
var str="abcde";
alert(putt.test(str));
方式2：
var putt=/e/;
var str ="abcde";
alert(putt.test(str));
var putt=/{abc}/;//表示要求字符串包含对应括号内的任意一个字符
var putt=/{a-z}/;//表示要求字符串是否包含小写字母，大写字母同理
var putt=/{0-9}/;//表示是否包含数字
var putt =/\w/;//\w表示是否包含，大写小写数字下划线
var putt=/a+/;//表示字符串是否包含一个a
var putt=/a*/;//表示字符串是否包含至少0个或一个a
var putt=/a？/;//表示字符串时否包含0个或1个a
var putt=/a{3}/;//表示字符串时否包含3个连续的a
var putt=/a{3,5}/;//表示字符串包含3-5个a
var putt=/a{3,}/;//表示字符串中至少包含3个a
var putt=/a$/;//表示字符串以a结尾
var putt =/a^/;//表示必须以a开头
var putt =/^a{3,5}$/;//表示字符串从头到尾检查是否满足包含3-5个a
JavaScript的校验
function onclickfun(){
var usernameobj=document.getElementById("username");
var usernametest=usernameobj.value;
var putt=/^\w{5,12}$/;
var spanobj=document.getElementById("span01");
if (putt.test(usernametest)){
spanobj.innerHTML="用户名合法";
}else {
spanobj.innerHTML="用户名不合法";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="请输入用户名">
<span style="color: darkred;"id="span01"></span>
<button onclick="onclickfun()">校验</button>
</body>
</html>
getelementsbyname方法
function checkallfun(){
var elementsByName = document.getElementsByName("hobby");//根据指定的name返回多个标签对象的集合
//让所有复选框全不选中
for (var i = 0; i < elementsByName.length; i++) {
if (!elementsByName[i].checked){
elementsByName[i].checked=true;
}
}
}
function checknofun(){
var no = document.getElementsByName("hobby");//根据指定的name返回多个标签对象的集合
for (var i = 0; i < no.length; i++) {
no[i].checked=false;
}
}
function chackreverfun(){
var elementsByName = document.getElementsByName("hobby");//根据指定的name返回多个标签对象的集合
for (var i = 0; i <elementsByName.length ; i++) {
if (elementsByName[i].checked){
elementsByName[i].checked=false;
} else {
elementsByName[i].checked=true;
}
}
}
</script>
</head>
<body>
<!-- 用户名：<input type="text" id="username" value="请输入用户名">-->
<!-- <span style="color: darkred;"id="span01"></span>-->
<!-- <button onclick="onclickfun()">校验</button>-->
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">javascrip
<br/>
<button onclick="checkallfun()">全选</button>
<button onclick="checknofun()">全不选</button>
<button onclick="chackreverfun()">反选</button>
</body>
</html>
getelementsbytagname方法
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickfun(){
var input01 = document.getElementsByTagName("input");
for (var i = 0; i < input01.length; i++) {
input01[i].checked=true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" >c++
<input type="checkbox" value="java" >java
<input type="checkbox" value="js" >javascrip
<br/>
<button onclick="onclickfun()">全选</button>
</body>
</html>
优先使用id>name>tagname
添加一个子节点
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function (){
var htmlDivElement = document.createElement("div");
htmlDivElement.innerHTML="qqqq";
document.body.appendChild(htmlDivElement);
}
</script>
</head>
<body>
</body>
</html>
jquery_140">jquery
javascript与query查询的结合js类库
JQuery的helloWord
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js">
</script>
<script type="text/javascript">
// window.onload=function (){
// var butobj = document.getElementById("butid");
// butobj.onclick=function (){
// alert("helloword")
// }
//
// }
$(function (){
var $btuobj = $("#butid");
$btuobj.click(function (){
alert("jquery的单击事件");
})
});
</script>
</head>
<body>
<button id="butid" onclick="onclickfun()">sayhello</button>
</body>
</html>
Jquery的核心函数
$()
传入参数：
1.函数页面加载完成之后，相当于window.οnlοad=function（）相同
2.传入html字符串，会创建html标签对象
$(html字符串)appendTo（父节点）//快捷添加标签和内容
3.选择器字符串
$("#id属性值")=id选择器
$(“标签名”)=标签名选择器
$(".class属性值")=类选择器
$(#id,标签名，.class属性值)=表示上面三种的交集
4.放入dom对象会转化为jquery对象
jquery对象是dom对象的数组+jquery的方法
jquery对象和dom对象的转化
$(dom对象)
jquery[下标]
jquery_188">jquery选择器
基本选择器
$("#id属性值")=id选择器
$(“标签名”)=标签名选择器
$(".class属性值")=类选择器
$(#id,标签名，.class属性值)=表示上面三种的交集
层级选择器
$(标签名 标签名)=选择第一个标签中的所有的第二个标签
$(标签名>标签名)=选择标签一中的子元素中的标签2
$(标签名+标签名)=选择标签1的下一个标签2
$(标签名~标签名)=选择标签1后的所有标签2
过滤选择器
基本过滤选择器
$(标签名:frist)=匹配第一个元素
$(标签名:last)=匹配最后一个元素
$(标签名not:(:选择器）)=匹配未选中的标签
$(标签名:even)=索引为偶数（奇数行）
$(标签名:odd)=索引为奇数（偶数行）
$(标签名eq（数字）)=表示第几行
$(标签名gt:（数字）)=索引大于该数字的
$(标签名lt:(数字))=索引小于该数字
$(标签名:header)=匹配标题标签
$(标签名:animated)=正在执行动画的标签
内容过滤器
$(标签名:contains（text）)=匹配该文本
$(标签名:empty)=所有空元素
$(标签名:parent)=匹配非空的标签
$(标签名:has(selector))=匹配所有选择器锁匹配的元素的内容
属性过滤器
$(标签名[属性])=过滤含有该属性的标签
$(标签[属性=value])=过滤属性值为vlaue的标签
$(标签[属性^=value])=过滤属性值为vlaue开头的标签
$(标签[属性$=value])=过滤属性值为vlaue结尾的标签
$(标签[属性*=value])=过滤属性值包含vlaue的标签
$("标签[条件1][条件2]")=过滤属性值包含vlaue的标签
表单过滤选择器
$(标签名:type名)=表示所有的该标签的该类型的内容
input，button，submit，text，password，checkbox，image。。。
$(标签名:enabled)=匹配所有可用元素
$(标签名:disabled)=匹配所有不可用元素
$(标签名:checked)=匹配所有所有选中的元素
$(select option=“selected”)=匹配所有选中的元素
元素的筛选
.eq(数字)=获取第几个元素
.frist（）=获取第一个元素
.last（）=获取最后一个元素
.filter（exp）=获取指定元素的集合
.is（exp）=判断是否为指定条件返回true或false
.has(exp)=返回所有匹配选择器的元素的内容
.not（exp）=删除匹配选择器的元素
.children（exp）=返回匹配给定选择器的子元素
.find（exp）=返回匹配给定选择器的后代元素
next(exp)=返回给定选择器的下一个兄弟元素
nextall（exp）=返回给定选择器的所有兄弟元素
nextuntil（exp）=返回给定选择器匹配指定位置后的所有元素
parent（exp）=返回父元素
prev（exp）=返回当前元素的上一个兄弟元素
prevall（exp）=返回当前元素的之前的所有兄弟元素
prevuntil（exp）=返回匹配当前选择器在指定位置的所有元素
silbings（exp）=返回所有兄弟元素
add（）=把选择器添加到当前的jqurey对象中
jqurey属性操作
html（）=设置和获取起始和结束标签中的内容
text（）=设置和获取起始和结束标签中的文本
val（）=设置和获取表单项的value
不传参数为获取，传入参数为设置
attr（）=可以设置和属性的值
prop（）=可以设置和属性的值//解决未定义的值
获取传入一个值，设置传入两个值
dom的增删改
appendTo（）插入该标签的所有子元素到后面成为最后一个子元素
prependTo（）插入到该标签的所有子元素前面成为第一个子元素
insertafter（）插入到该标签的后面成为下移个元素
insertbefore（）插入到该标签的后面成为上一个元素
replacewith（）替换该标签
replaceall（）替换所有的该标签
remove（）删除改标签
empty（）删除该标签的内容保留标签
jquerycss_268">jquery中的css样式操作
addclass（）添加样式
remove（）删除样式
toggleclass（）有就删除没有就添加样式
offest（）获取和设置元素的坐标
jquery_273">jquery的动画操作
show（）将隐藏的显示
hode（）将可见的隐藏
toggle（）可见就隐藏，不可见显示
fadein（）淡入
fadeout（）淡出
fadeto（）淡化
fadetoggle（）淡入淡出切换
可以添加参数，第一个为动画执行的事件，第二个为回掉函数，操作标签
jquery_282">jquery事件操作
$(function（）{})与windows.οnlοad=function（）{}的区别
jqurey页面加载完成之后先执行，原生的后执行
1.jqurey的页面加载完成之后是浏览器的内核解析完页面标签创建好dom对象之后马上执行 原生需要加载标签内容后执行
click（）绑定单击事件
mouseover（）鼠标移入事件
mouseout（）鼠标移出事件
bind()可以给元素绑定一个或多个事件
one（）使用和bind一样但只能响应一次
unbind（）接触绑定
live（）绑定事件，可以绑定选择器匹配的所有事件包含动态创建的
事件对象
function（event）可以获取事件对象
