1→jQuery简介
1.jQuery引言
(1)框架:对现有代码的封装,便于后续的重复利用,提高开发效率.
jQuery是一个javascript框架.
对javascript代码的封装,javascript功能代码的半成品;
好处:
简化了javascript开发document.getElementById("");
屏蔽浏览器差异 IE WebKit(FF Chrome Safari);
作用:简化了javascript的开发
mybatis------> jdbc------>mybatisxx.jar
jQuery-------> js ------>jQuery-1.xx.x.js
*jquery.min 文件经过压缩,便于网络传输
运行在服务器端的:servlet+jsp(EL+JSTL)
运行在浏览器端的:HTML CSS JavaScript
使用jquery:
1.通过script标签引入外部js文件
<script type="text/javascript" src="jquerey-1.8.3"></script>
2.另外一个script标签中使用jQuery函数
根据id获得对象的方法
ID选择器:$("#id")
jq.text(); //获取标签体内部的文本 ----> 相当于:dom对象.innerHTML
js.css('css属性名','css属性值');
*jquery标签对象支持链式调用
3. 通过代码获得dom对象和jquery获得jq对象
*dom对象.js属性或方法
*jq对象.jq方法 | jq属性
*如何获取jq对象:
①通过jq选择器获得jquery对象
②通过dom对象获得jquery对象 $(dom对象)
③通过$('标签文本'),创建一个新的jq对象 $('<td></td>')
(4)选择器:通过既定的方式获取对应的标签对象
(1)基本选择器:
(1)ID选择器:$("#id") 通过id获取标签对象
(2)元素选择器: ("标签名") 通过标签名获取对象
(3)类选择器:$(".样式类名") 通过 class的值来获取对象
(4)多路选择器:$("标签名,标签名")
(5)全选择器:$("*")
(2)层级选择器
*jquery对于多选择器共存时的解析规则:从左到右依此解析
$("selectorA selectorB") 后代选择器(包括子代和孙带等)
$("selectorA > selectorB") 【重点】(直接仅有子代)子代 选择器
$("selectorA+selectorB") 紧邻后续的兄弟选择器,选中紧邻selectorA标签的后续兄弟对象
$("selectorA~selectorB") 【重点】所有后续兄弟选择器(以selectorA后续所有兄弟标签)
(3)简单过滤选择器
:first $(sel:first) 选择第一个元素
:last $(sel:last) 选择最后一个元素
:eq(i) $(sel:eq(i)) 下标为i的元素(下标从0开始)
:gt(i) $(sel:gt(i)) 选择下标>i的元素
:lt(i) $(sel:lt(i)) 选择下标<i的元素
:even $(sel:even) 选择下标索引为偶数的元素
:odd $(sel:odd) 选择下标索引为奇数 的元素
:not $(sel:not(selectorA)) 选择已在范围中排除掉sleectorA元素的其他元素
(4)内容过滤选择器 ---内容:子标签/标签体中文本
:empty 在已有范围内中选取出没有标签体的元素
:parent (是父亲)在已有范围内中选取出含有标签体的元素
:contains(text) 【重点】在已有范围内中选取出含有对应文本的元素
:has(selector) 【重点】在已有范围内中选取出含有SelectorA后代的元素
(5)可见性过滤器【重点】
visible 可见元素
hidden 隐藏的元素
(6)属性过滤选择器
['属性名'] 过滤保留含有"属性名"属性的元素
['属性名=属性值'] 过滤保留含有"属性名",且该属性值为"属性值"
*表单属性过滤选择器
:checked 只适用于被选中的 radio和checkbox
:selected 适用于option
(7)表达选择器
:text 获得文本显示框
:checkbox 获得所有的复选框
:radio 获得所有的单选按钮
(8)遍历:【重点】
$(selectorA) -------->jquery对象 ------>size() //元素个数
--------->eq(i) ----------->获得i位置下标的元素
*纯jquery方式操作数组的方式
var spans=$("sapn"); //选择全部的span 标签
//遍历多个元素
for(var i=0;i<spans.size();i++){
//获取当前元素
var s = spans.eq(i);
console.log(s.text());
}
dom对象操作的方式:
var sp = spans.get(i); //获得dom对象
console.log($(sp));
jquery特有的each()遍历spans数组
jquery对象.each(function(){
//this---当前被遍历的jq对象
//$(this) --当前被遍历的jq对象
});
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
返回指定元素的父标签
children(); 返回指定元素的所有子元素 ---->数组
next(); 返回相邻直接的下一个兄弟标签
prev(); 返回相邻直接的上一个兄弟标签
(1)attr()方法:可以获得对应标签的属性值 attr(“属性名”)
attr()方法:可以设置对应标签的属性值 attr(“属性名”,”属性值”)
注意:
1 如果对应标签中 不存在这个属性,通过attr 还可以添加这个属性
2可以通过attr()方法设置多个属性
例如 $(“#d”).attr(“class”,”a”).attr(“id”,”c”);
$(“#d”).attr({
class:"a",
id:"c"
});
removeAttr()方法:删除一个标签的特定属性 removeAttr(“属性名”)
(2)通过jquery修改 获得css的样式属性
css()方法:可以获取对应标签的css的样式属性 css(“css属性名”)
css()方法:可以设置对应标签的css的样式属性 css(“css属性名”,”css的属性值”)
注意:可以通过json形式设置多个css的样式属性 css({})
隐藏css(“display”,”none”) hide(毫秒) 通过动画形式进行隐藏或者显示
显示css(“display”,”block”) show()
(3)通过jquery修改 删除css的样式类型
addClass(“class名字”) 添加一个样式类型
removeClass(“class名字”) 删除一个样式类型
总结:【重点】
将dom----------> ($(dom对象))
jquery对象----->dom对象 jq对象.get(0)
==================================================================================================
day2_1
1. jQuery事件
1.基于HTML实现的事件绑定:
HTML:注册事件
function clicked(){
xxxxxxx;
}
<input type="button" value="click_me" id="btn" οnclick="clicked()"/>
(2)基于编程方式给标签添加事件
javascript:注册事件
window.οnlοad=function(){//注册onload事件,在文档加载完成后触发执行
btn.οnclick=function(){//对btn注册单机事件
xxxxx;
}
}
<input type="button" value="click_me" id="btn"/>
*注意:在事件注册时,必须保证事件源已经加载了
javascript事件绑定:
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = test;
function test(){
alert("按钮点击");
}
</script>
(3)jQuery事件绑定
jQuery注册事件:
$(document).ready(function(){ //在文档加载完成后触发执行
$("#btn").click(function(){
//单机事件后执行的函数体
});
});
<input type="button" value="click_me" id="btn"/>
事件函数:
click(); 单机事件
dblclick(); 双击事件
focus(); 获得焦点
blur(); 失去焦点
mouseover(); 鼠标移入
mouseout(); 鼠标移出
mousemove(); 鼠标移动
mousedown(); 鼠标按下
mouseup(); 鼠标松开
change(); 内容改变失去焦点
(4)在文档加载完毕之后运行
js:
window.onload(function(){
//在文档加载完毕之后在执行
$("#btn").click();
});
jquery:
$(document).ready(function(){
//在文档加载完毕之后在执行
$("#btn").click();
});
简化版:【重点】
$(function(){
//文档加载完毕
});
(5)其他事件
*toggle(fn1,fn2,fn3,fn4,fn5,...,fnn):[事件函数]复合的单击事件
当第一次被单击的时候触发fn1,都二次单击触发fn2依此类推,可循环
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
语法
$(selector).toggle(speed,callback,switch)
*hover(fn1,fn2):一次性的注册mouseover和mouseout事件
当鼠标移入时执行fn1,当鼠标移出时执行fn2
*submit();提交form【重点】
$("form").submit(); //将表单数据提交
==================================================================================================
jQuery Dom编程
1.DOM编程
(1)DOM编程相关函数
(1)val() 获得输入框的属性值
(2)val(新值) 修改input标签的value属性值
(3)append(); 将参数的jquery对象添加至所有子元素的尾部
prepend(); 在选择对象的前一个位置添加子对象
(4)prop('属性名'); 通过获得该属性名所对应的值
prop('属性名','属性值') 给该属性赋新的属性值
prop("属性名",false/true); //设置Boolean类型的属性的值
*注意：在获取、设置boolean 类型的属性时attr存在问题,此时可使用prop方法
prop方法是jquery-1.7.x之后对于attr的补充.
(5)attr('属性名') 通过标签名获得相应的属性值
(6)empty(); 将当前对象所有子标签清空
(7)remove(); 删除当前自己本身标签对象
(8)text(); 获取元素标签体内部的文本
text(string); 设置标签体内部的文本
(9)html(); 获取html内部的代码
html(html); 设置Html内部的代码
(10)css("样式属性名"); 获取属性 值
css("样式属性名","样式属性值"); 设置对应的属性值
css({样式属性名:"属性值",样式属性名:"属性值",...});
(11)addClass("样式类名"); 增加样式类
(12)removeClass("样式类名");移出样式类
(13)before(); 在原有对象之前追加一个子标签
(14)after(); 在原有对象之后追加一个兄弟标签
注意:在事件函数中this,代表触发该事件的事件源
内置jquery的事件函数:------------->静态绑定
$jq.live(事件名称,函数);------>动态绑定【重点】
事件名称:
click 单击
dblclick 双击
...
两级联动:
function init(){
//①将所有的省初始化在prov
for(var i=0;i<json.length;i++){
var pro = json[i].name;
on//创建opti
var op = $("<option>"+pro+"</option>");
$("select[name='prov']").append(op);
}
// ②将河北的市显示在city里边
var cities = json[0].cities;
for(var j=0;j<cities.length;j++){
//创建option
var opj = $("<option>"+cities[j]+"</option>");
$("select[name='city']").append(opj);
}
}
//在文档加载完成后 运行
$(function(){
init();
$("select[name='prov']").change(function(){
//清空当前city下拉列表
$("select[name='city']").empty();
/*
1.先获得选项的下标----json下标
2.
* */
//获得下拉列表在json中对应的位置
var index = $("select[name='prov']").get(0).selectedIndex;
var cities = json[index].cities;
for(var i=0;i<cities.length;i++){
var op = $("<option>"+cities[i]+"</option>");
$("select[name='city']").append(op);
}
});
});
</script>
*注意: 使用<a href='javascript:void(0)'> 可以取消超链接的默认事件
=============================================================================
DOM编程:
添加:
append(jq); //向自标签的末尾追加jq元素
prepend(jq); //向子标签的开头追加子标签
after(jq); //向相邻的哥哥位置添加jq对象
before(jq); //向相邻的弟弟位置添加jq对象
addClass(); //添加class属性值的
删除:
remove(); //删除当前行内容
empty(); //删除所有内容
修改:
val(String)
text(String); //内部元素普通字符串文本
html(); //内部包含有效的html标签
css("属性名","属性值"); //修改标签的样式属性
css({'样式属性名':'属性值',样式属性名:'属性值'});
removeClass(); //删除class属性值的
修改属性:
attr();
prop();
prop('属性名','属性值') //给该属性赋新的属性值
prop("属性名",false/true); //设置Boolean类型的属性的值
*注意：在获取、设置boolean 类型的属性时attr存在问题,此时可使用prop方法
事件问题:
$("#xxx").click() .change() .blur()
只能为现有的标签加入事件处理,但是通过jquery程序动态创建的内容,
事件是添加不上的
使用live()函数解决上述问题:
$("#btn").live("click",function(){xxx})
jquery内置动画:
show([1000]); //显示
hiden([1000]); //隐藏
fadeIn([1000]); //浅入
fadeout([1000]); //浅出
slideDown([1000]); //下滑显示
slideuUp([10000]); //上滑显示
========================================================================================
day2_3
1.jquery插件
(1)日期插件
1.引入datepicker插件相关的js文件和css文件,直接将文件夹引入WdatePicker.js即可
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../My97DatePicker/calendar.js"></script>
<script type="text/javascript" src="../../My97DatePicker/WdatePicker.js"></script>
*注意:主要就是 calendar.js 和 WdatePicker.js 这两个js文件来提供提起插件的页面
2.为标签通过绑定事件
<input class="Wdate" id="date" οnclick="WdatePicker()"/>
*注意:在input增加class="Wdate",绑定单击事件,函数名WdatePicker()
修改日期格式:
给WdatePicker()传入一个对象,以Json形式
{
dateFmt:"yyyy年MM月dd日 HH:mm:ss",
readOnly:true,
isShowWeek:true
}
(2)放大镜插件
1.引入相关的js文件,css文件
<link rel="stylesheet" href="../../jquery放大镜插件使用/jquery.jqzoom.css" type="text/css"/>
<script type="text/javascript" src="../../jquery放大镜插件使用/jquery-1.8.3.js"></script>
<script type="text/javascript" type="text/javascript" src="../../jquery放大镜插件使用/jquery.jqzoom-core.js"></script>
2.$("#超级链接id").jqzoom({
zoomWidth:200,
zonmHeight:200
});
<a href="d2.jpg" id="mg1">
<img src="s2.jpg"/>
</a>
3.通过jquery代码添加放大镜效果
$(function(){
//文档加载完毕之后
$("#bg").jqzoom();
});
4.可选参数
{
zoomWidth:600,
zonmHeight:400
}
(3)表单数据检验插件
1.引入相关js文件
<script type="text/javascript" src="../../jquery_validate插件的使用/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../jquery_validate插件的使用/jquery.validate.js"></script>
<script type="text/javascript" src="../../jquery_validate插件的使用/message_zh_CN.js"></script>
2.对form添加validate()方法
$(function(){
$("#表单id").valodate({
rules:{
name属性:{规则};
}
messages:{
验证失败后显示文字(那个属性:验证属性)
}
});
});
规则:
required:true //必填
minlength:数字 //字符的最小长度
email:true //邮箱的格式
rangelength:[6,10] //字符串长度是1到2之间
equalTo //#确 id值
eg：
<script type="text/javascript">
$(function(){
$("#fm1").validate({
rules:{
username:{required:true,minlength:6},
pwd:{required:true,minlength:6},
repwd:{required:true,equalTo:'#pwd1'},
email:{required:true,email:true}
},
messages:{
username:{required:"用户名不能为空",minlength:"用户名长度不能小于6位"},
pwd:{required:"密码不能为空",minlength:"密码长度不能小于6位"},
repwd:{required:"密码不能为空",equalTo:"两次密码不一致"},
email:{required:"邮箱格式不正确,请核对后重新输入"}
}
});
});
</script>
jQuery【重点】:
选择器
1834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
