何平波
今天JQ的很多种方法和写法,我将今天的两个案例拿出来具体说明,加上自己的理解
第一个方法是后台的移除商品案例
具体代码详见案例代码实现
1.$(function(){}) 函数的入口(每个函数都必须要有一个函数入口)
2.click(): 点击事件(括号里也是一个函数执行function(){}) {}里是点击事件的函数方法代码
3.option:selected 列表里的选定的元素 option列表里的全部元素
4.$("#xx").appendTo() 获取指定的元素添加到指定的位置
5.dblclick: 双击事件(括号里也是一个函数执行function(){}) {}里是双击事件的函数方法代码
)
注意:需先设定好两个下拉列表(两个列表里的元素可以被互相调用),设定id,用来被函数调用, 设
定好4个"转移符",也分别设定好id,方便函数调用.
这里是让"转移符"来点击发生元素转移的事件的.所以是"$("#转移符").click()"
后台的一个商品移除效果要先定义好"转移符"(可以是一个按钮也可以是一个特殊的符号),然后分
好要将哪个列表里的元素通过什么效果移除到哪个列表就会比较容易理解.
第二个方法是使用JQ的高级效果来检测注册表的内容是否符合规范
具体代码详见案例代码实现 由于此案例有规定的样式,所以要引入指定的.css文件
引入css的方式<link rel="stylesheet" herf="文件的路径.css">
1.注册表上要定义好id 和 样式class="xxx"(id:被函数调用 class:用来创建效果)
2.$(function(){}) 函数的入口(每个函数都必须要有一个函数入口)
3.$("form intput.xxx").each() xxx指的是定义好样式class名,这段代码块的意思是
获得并遍历表单选择器的id为xxx的元素内容
4.$(this).parent().append("<b class='high'>*</b>");
$(this):强调值为本身 parent():父元素 append():添加 括号里是可以写入规定好的样式,加
上class="";
这段代码块的意思是获得它的父元素,然后添加设定好的样式
5.$("form input").blur(function(){
$("form input"):获得所有的input输入项,这里采用的是一个表单选择器
blur():失去焦点事件 这里的效果是当事件触发时会发生什么效果
6.var $parent = $(this).parent();
$(this).parent();获得所有输入项的父元素 ,并定义好一个变量名来接收
7.$parent.find(".formtips").remove();
这段代码块的意思是找到find()元素选择器为formtips的元素内容并删除
如果不编写这段代码的话,显现的效果将会重复出现
8. if($(this).is("#username")){
//if($(this).is("#username")):判断这个(this)元素id是不是(is())"#username"
if(this.value == ""){
//如果是的话,那么再判断if(this.value这个元素)是否等于空集
$parent.append("<span class='formtips onError'>用户名不能为空</span>");
//如果不是的话就在这些元素内容外添加一些定义好(formtips onError)的样式和提醒
(formtips onError)这里为甚么会有空格呢?因为是一个后代选择器
}
else{ //否则的话,就是另外一种样式和提醒
$parent.append("<span class='formtips onSuccess'>用户名输入正确</span>");
}
}
9.密码的检测同样可以采用以上方法来进行检测,理论和效果也是一样的
|