jquery入门

来源:互联网 发布:诺基亚s40软件下载 编辑:程序博客网 时间:2024/05/19 03:45
 一.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来引用jquery2.什么是CND:内容分发网络,防止js文件占用本地服务器的流量,一般都会将js文件放置在
其他服务器上,这样的服务器就叫做CDN服务器,如果我们要用的时候我们只需
要引用地址即可3.jquery的选择器:选择器是用来,查询或者查找HTML元素.Jquery的选择器的返回值就是一个数组.
1.标签选择器$("标签名")
2.类选择器$(".class属性值")
3.id选择器$("#id属性值")
注意:通过Jquery选择器获取到的数组并不是一个js的数组,而是Jquery扩展后
的数组,该数组中集成Jquery的所有方法.4.Dom元素加载完成后调用回调js函数:1.window.onload=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)
                   }
                   
                });

原创粉丝点击