学习网址:http://www.runoob.com/
一.1.jquery下载地址
2.导入jquery<script type="text/javascript" src="jquery的文件路径"></script>
3.Hello World程序<script type="text/javascript"> //当所有的html元素加载完成后执行该回调函数 $(function(){ //弹框 alert("Hello World !"); }) </script>
二.1.通过CDN来引用jquery
2.什么是CND:内容分发网络,防止js文件占用本地服务器的流量,一般都会将js文件放置在
其他服务器上,这样的服务器就叫做CDN服务器,如果我们要用的时候我们只需
要引用地址即可3.jquery的选择器:选择器是用来,查询或者查找HTML元素.Jquery的选择器的返回值就是一个数组.
1.标签选择器$("标签名")
2.类选择器$(".class属性值")
3.id选择器$("#id属性值")
注意:通过Jquery选择器获取到的数组并不是一个js的数组,而是Jquery扩展后
的数组,该数组中集成Jquery的所有方法.4.Dom元素加载完成后调用回调js函数:1.window.οnlοad=function(){
}
2.通过事件的方式 onload
3.Jquery(推荐使用):
$(function(){
})
4.$(document).ready(function(){
jquery对象和dom对象有何区别
dom对象 document.getElementXX dom对象只能访问dom中预定义的方法 value innerHTML innerText .style.样式名=样式值
jquery对象 就是通过 $()对象处理返回的对象 该对象是数组 只能调用jquery提供的方法 比如 css text html val提供的方法.5.Jquery对象和Dom对象之间的转换(非常重要):Jquery转Dom:
1.$("#div")[0],这样通过[]转换为Dom对象
2.$("#div").get(0),这样也可以转换为Dom对象
Dom转Jquery:
1.通过document.getElementXXX方法获取到的Dom对象,
通过将获取到的Dom对象的变量放入到$()中即可.
Jquery事件:
什么是事件:
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法
绑定事件:
1.通过获取Dom元素的方式来绑定事件,只能绑定一个事件.
2.如果你想绑定两个事件,可以通过windows提供的方法,当是这个方法有兼容性:
attachEvent(IE)
addEventListener(Chrome,FF)
//返回非0任意字符 表示true 返回0 false
if(btn.attachEvent){
//IE使用栈
btn.attachEvent("onclick",function(){
alert("IE下点击了");
});
btn.attachEvent("onclick",function(){
alert("IE下点击了1");
});
}else{
//w3c的标准 队列
btn.addEventListener("click",function(){
alert("chrome下点击了");
});
btn.addEventListener("click",function(){
alert("chrome下点击了1");
});
}
jquery除了出色的选择器 考虑了 不同浏览器的兼容性 可以使用 jquery提供的方法 兼容各种浏览器
Jquery绑定事件(Img):
(图片)
可以通过event获取到鼠标的所在的X轴和Y轴
方法:clientX,clientY
jquery对象的常用一些方法
get(index) 获取jquery对象中的dom对象
eq(index) 获取jquery对象中的jquery对象 equals find(选择器)搜索某个元素下任意层级的子元素
not (选择器)排除所有满足选择器的任何元素淡入淡出fadeOut(5000)fadeIn(5000)显示隐藏show()hide() 1修改dom元素的数据(不带参数获取数据 带参数修改数据) val-text-html文本框数据val 文本 text html html
attr 属性设置 带一个参数获取属性 两个参数属性
2修改dom元素的样式
css行内样式
addClass内部样式表
3修改dom元素的子元素
append 追加元素到所有的子元素后 remove 元素自我销毁 不是删除父元素下的子元素
循环$.each(arr,function(index,val){
alert("索引:"+index+" 值:"+val);
})ajax//默认是异步
$.ajax({
url:'../json.do',//表示请求的路径
data:$("#myForm").serialize(),//userName=值&sex=值
type:'get',
async:false,//一次执行一个线程
dataType:'json',//表示响应的数据类型 指定 自动调用 JSON.parse方法
success:function(msg){
$("tr[type='data']").remove();
//参数就是返回的json
$("#mytb").append("<tr type='data'><th>"+msg.empno+"</th><th>"+msg.ename+"</th></tr>");
},
error:function(xhr, textStatus, errorThrown){
alert("调用服务器失败-"+xhr.status+"-"+errorThrown)
}
});
把字符串的json转换成json对象
var a="{a:\"a\",b:\"b\"}";
var b=eval("("+a+")");
alert(b.a)
一.1.jquery下载地址
2.导入jquery<script type="text/javascript" src="jquery的文件路径"></script>
3.Hello World程序<script type="text/javascript"> //当所有的html元素加载完成后执行该回调函数 $(function(){ //弹框 alert("Hello World !"); }) </script>
二.1.通过CDN来引用jquery
2.什么是CND:内容分发网络,防止js文件占用本地服务器的流量,一般都会将js文件放置在
其他服务器上,这样的服务器就叫做CDN服务器,如果我们要用的时候我们只需
要引用地址即可3.jquery的选择器:选择器是用来,查询或者查找HTML元素.Jquery的选择器的返回值就是一个数组.
1.标签选择器$("标签名")
2.类选择器$(".class属性值")
3.id选择器$("#id属性值")
注意:通过Jquery选择器获取到的数组并不是一个js的数组,而是Jquery扩展后
的数组,该数组中集成Jquery的所有方法.4.Dom元素加载完成后调用回调js函数:1.window.οnlοad=function(){
}
2.通过事件的方式 onload
3.Jquery(推荐使用):
$(function(){
})
4.$(document).ready(function(){
jquery对象和dom对象有何区别
dom对象 document.getElementXX dom对象只能访问dom中预定义的方法 value innerHTML innerText .style.样式名=样式值
jquery对象 就是通过 $()对象处理返回的对象 该对象是数组 只能调用jquery提供的方法 比如 css text html val提供的方法.5.Jquery对象和Dom对象之间的转换(非常重要):Jquery转Dom:
1.$("#div")[0],这样通过[]转换为Dom对象
2.$("#div").get(0),这样也可以转换为Dom对象
Dom转Jquery:
1.通过document.getElementXXX方法获取到的Dom对象,
通过将获取到的Dom对象的变量放入到$()中即可.
Jquery事件:
什么是事件:
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法
绑定事件:
1.通过获取Dom元素的方式来绑定事件,只能绑定一个事件.
2.如果你想绑定两个事件,可以通过windows提供的方法,当是这个方法有兼容性:
attachEvent(IE)
addEventListener(Chrome,FF)
//返回非0任意字符 表示true 返回0 false
if(btn.attachEvent){
//IE使用栈
btn.attachEvent("onclick",function(){
alert("IE下点击了");
});
btn.attachEvent("onclick",function(){
alert("IE下点击了1");
});
}else{
//w3c的标准 队列
btn.addEventListener("click",function(){
alert("chrome下点击了");
});
btn.addEventListener("click",function(){
alert("chrome下点击了1");
});
}
jquery除了出色的选择器 考虑了 不同浏览器的兼容性 可以使用 jquery提供的方法 兼容各种浏览器
Jquery绑定事件(Img):
(图片)
可以通过event获取到鼠标的所在的X轴和Y轴
方法:clientX,clientY
jquery对象的常用一些方法
get(index) 获取jquery对象中的dom对象
eq(index) 获取jquery对象中的jquery对象 equals find(选择器)搜索某个元素下任意层级的子元素
not (选择器)排除所有满足选择器的任何元素淡入淡出fadeOut(5000)fadeIn(5000)显示隐藏show()hide() 1修改dom元素的数据(不带参数获取数据 带参数修改数据) val-text-html文本框数据val 文本 text html html
attr 属性设置 带一个参数获取属性 两个参数属性
2修改dom元素的样式
css行内样式
addClass内部样式表
3修改dom元素的子元素
append 追加元素到所有的子元素后 remove 元素自我销毁 不是删除父元素下的子元素
循环$.each(arr,function(index,val){
alert("索引:"+index+" 值:"+val);
})ajax//默认是异步
$.ajax({
url:'../json.do',//表示请求的路径
data:$("#myForm").serialize(),//userName=值&sex=值
type:'get',
async:false,//一次执行一个线程
dataType:'json',//表示响应的数据类型 指定 自动调用 JSON.parse方法
success:function(msg){
$("tr[type='data']").remove();
//参数就是返回的json
$("#mytb").append("<tr type='data'><th>"+msg.empno+"</th><th>"+msg.ename+"</th></tr>");
},
error:function(xhr, textStatus, errorThrown){
alert("调用服务器失败-"+xhr.status+"-"+errorThrown)
}
});
把字符串的json转换成json对象
var a="{a:\"a\",b:\"b\"}";
var b=eval("("+a+")");
alert(b.a)