JQuery零基础语法速学

2017-07-11 本文已影响37人 18587a1108f1

JQuery学习笔记

1.认识JQuery

简介

JQuery是一个JavaScript库，语法简洁，有跨平台的兼容性，简化了开发人员遍历html文档、操作dom、处理事件、执行动画和开发Ajax的操作。理念是：写得少，做得多。

优点

1.轻量级。UglifyJS压缩后大小保持在30KB
2.选择器强大。
3.DOM操作封装。
4.可靠地事件处理机制。
5.完善的Ajax。

库类型

jquery.js（开发版）约229kb,用于学习和开发。
jquery.min.js（生产版）约31kb，用于产品和项目。

简单使用

1.页面引入：<scrpit src="../js/jquery.js" type="text/javascript"></script>
2.编写简易代码：$为JQuery的简写形式

$(document).ready(function(){
    alert("Hello World!"); 
});

3.链式操作：

//当点击level下的a时，添加current class，a后的元素显示，它父辈的同辈元素下的子元素a移除current class，其后元素隐藏
$(".level1 > a").click(function(){
    $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
    return false;
}

4.DOM对象和jQuery对象
DOM(Documnet Object Model 文档对象模型)，每一份DOM可以表示为一棵树。可以通过JavaScript的getElementsByTagName或者getElementsById来获取元素节点。
jQuery对象:通过jQuery包装DOM对象后产生的对象。jQuery对象可以使用jQuery方法但是无法使用DOM对象的任何方法。
二者变量声明：

var $variable = jQuery对象;
var variable = DOM对象;

2.选择器

css选择器

css选择器分为标签选择器(td)，ID选择器(#td)，类选择器(.td)，群组选择器（td,p,div.a），后代选择器(#links a) 通配选择器（*）。

jQuery选择器

1.基本选择器

jQuery选择器继承了css风格。jQuery行为规则都必须在获取元素后才能生效。

//通过id选择元素示例
$("#td").css("color","red");

2.层次选择器

通过DOM元素之间的层次关系获取特定元素

//层次选择器示例 
//div下的所有span后代元素(后代元素可以是多级，子元素，子子元素等)
$("div span").css("background","$bbffaa");
//div下的所有span子元素
$("div>span").css("background","$bbffaa");
//class为one的next<div>元素
$(".one+div")  等价于$(".one").next("div");
//id为two的的元素后的所有<div>同辈元素
$("#two~div")  等价于$("#two").nextAll("div");

3.过滤选择器

通过特定的过滤规则来筛选出所需的DOM元素。过滤规则与CSS中的伪类选择器语法相同。即一个选择器可以以冒号(:)开头。

//取第一个
$("div:first")
//取索引值为3
$("div:eq(3)")
//当前获取焦点的元素 (blur为失去焦点
$(":focus").css("background",#bbffaa);

4.内容选择器

//含有文本'我'的<div>元素
$("div:contains('我')")
//含有class为mini元素的<div>元素
$("div:has('.mini')")
$("div:has(p)")

5.属性过滤选择器

//title值等于test的<div>
$("div[title=test]")
//title以st结尾的<div>
$("div[title$=st]")

3.jQuery中的DOM操作

1.查找元素节点：用选择器完成

//<ul>里第二个<li>
var $li = $("ul li:eq(1)"); 
var li_txt= $li.text();
alert(li_txt);

2.查找属性节点：用选择器获取元素后，可以用 attr() 方法 获取和设置 它的各种属性值。用 removeAttr() 可删除属性值。

用 text() 方法可以 获取和设置 元素的text值；用 val() 方法可以 获取和设置 元素的值

var $para = $("p");
var p_txt=$para.attr("title");
$para.attr("title","test");
//如果是添加设置class属性的话需要用addClass()方法，移除同理用removeClass()方法
$para.addClass("newclass");
//设置文本可以用text()
$("p").text("text");
//获取
$("p").text();

3.创建元素节点：创建新元素可使用jQuery的工厂函数 $() 来完成，用法为 $( html代码 )

//以添加<li>元素节点为例
var $li_1 = $("<li title='test'>test</li>");
//用append加入到<ul>中
$("ul").append($li_1);

tips:无论 $(html)中的html代码多复杂，都可以使用同样的方式创建。

4.插入节点：

append() 方法外，还有prepend() ，after() ，before()等

5.删除节点:

通过选择器选择元素后，可以通过 .remove() 方法，将节点删除。

detach()方法，它删除后重新追加元素会保留绑定的事件。

empty()方法，清空节点中的所有后代节点。

6.切换样式：

toggle() 方法，可以让元素在两个样式间切换

$("p").togglelClass("another");

点击<p>后，如果another已经在<p>的class里了，就删除它；否则就添加它。

4.jQuery中的事件和动画

1.jQuery中的事件

JavaScript和html之间的交互通过用户在浏览器操作页面引发的事件来处理。jQuery提供了优雅的事件处理语法和强大的事件处理能力。

加载DOM $(document).ready()方法

事件模块中最重要的一个函数，极大提高了web应用程序的响应速度。在DOM完全就绪时就可以被调用。

$(document).ready(function(){})等价于$(function(){})

事件绑定 bind()方法（事件解绑定，unbind()）

格式为bind(type [, data] ,fn);

示例：$(#pannel h5.head).bind("click",function(){ $(this).next().show();})

Tips: this 引用的是携带响应行为的dom元素，将其直接转换为jQuery对象

合成事件 hover()方法 toggle()方法

hover()用于模拟光标悬停事件，hover(enter , leave);

toggle()用于模拟鼠标连续点击事件，toggle(fn1,fn2,...fnN); 第一次点击触发fn1，第二次触发fn2...

事件对象

IE-DOM和DOM实现事件对象的方法各不相同，jQuery对此进行了扩展和封装，使任何浏览器中都能很轻松的获取事件对象以及事件对象的一些属性。

$(element).bind("click",function(event){}); //event为事件对象

**冒泡事件 **

点一个span，也会触发其外部的div以及外部的body的已经定义的click事件，可通过 event.stopPropagation();来停止冒泡。

默认事件

点击表单中的提交就会提交，有时候需要阻止元素的默认行为。 event.preventDefault();

Tips:如果想同时停止冒泡和默认，可以在事件处理函数中 return false; 这是一种简写。

模拟操作

有些时候我们定义了事件，可以通过 trigger() 来触发。

$('#btn').bind("myClick",function(){.....});

$('#btn').trigger("myClick");

2.jQuery中的动画

show()方法与hide()方法

show()除了可以使元素显示，还可以添加速度参数，show(1000)就是1000毫秒显示出来。高、宽、不透明度同时变。

$("element").show("slow");//还有normal,fast

fadeIn()方法和fadeOut()方法

他们只改变元素的不透明度，同样可以设置速度参数。

自定义动画：animate()方法

animate(params,speed,callback)为其结构，params为属性和值的映射组，callback为在动画完成时的执行参数，可选。示例为left当前位置上减500px,最后改变样式。

$(this).animate({left:"+=500px"},3000，function(){$(this).css("border","5px solid blue")})

Tips：如果想延迟动画可在animate后加 .delay(1000)

Tips：动画animate()方法链式书写，动画是顺序发生的。

停止动画: stop()方法

stop([clearQueue],[gotoEnd]);为其结构。stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。clearQueue参数设为true时，可以立即停止并把剩下的动画都清空。gotoEnd参数可以让正在执行的动画直接到达结束时刻的状态。

$(this).stop(true).animate({height:"150"},200).animate({width:"300"},300)

判断元素是否处于动画状态: is(":animated")

if(!$(document).is(":animated")){//如果没动画，则添加新动画....}

其他动画方法

toggle()方法: 切换元素可见状态： $(this).next().toggle();

slideToggle()方法: 通过高度变化切换元素可见状态 $(this).next().sildeToggle();

fadeToggle()方法: 通过不透明度变化切换元素可见状态 $(this).next().fadeToggle();

fadeTo()方法: 以渐进方式调整元素的不透明度到指定的值。$(this).next().fadeTo(600,0.2);

5.jQuery对表单、表格的操作

1.表单应用

文本框应用

文本框获取、失去焦点时改变样式：

有一个input文本框，<input id="username" type="text"> 可以添加一个类为focus的css样式：

.focus{
  border:1px solid #f00;
  background:#fcc;
}

然后为文本添加获取和失去焦点事件：

$(function(){
  $(":input").focus(function(){
    $(this).addClass("focus");
  }).blur(function(){   //blur为失去焦点事件
    $(this).removeClass("focus");
  });
});

复选框应用

当一个form表单中有多个复选框(checkbox)时，可以实现全选、全不选等操作。

//点击id为CheckAll的button，将name为items的checkBox全选
$("#CheckedAll").click(function){
  $('[name=items]':checkbox).attr('checked',true);
};
//将选中值，通过val()方法输出
$('#send').click(function(){
  var str= "你选中的是：\r\n";
  $('[name=items]:checkbox:checked').each(function(){
    str+=$(this).val()+"\r\n";
  });
  alert(str);
});

Tips: 建议设置disabled和checked属性时，将attr()方法换为prop()方法

下拉框应用

下拉框(select multiple)中将选中的选项移到右方

<select muptiple id="select1">
  <option value="1">选项1</option>
  <option value="2">选项2</option>  
</select>

//add按钮，将id为select1的下拉框
$('#add').click(function(){
  var $options = $('select1 option:selected'); //获取选中的项
  var $remove = $options.remove();  //删除下拉列表中选中的选项
  $remove.appendTo('#select2');  //追加给对方
});

表单验证

下面为一个form表单

<form method="post" action="">
    <div class="int">
        <label for="username">用户名：</label>
        <input type="text" id="username" class="required"/>
     </div>
     <input type="submit" value="提交" id="send"/>
     <input type="reset" valut="重置" id="res">
</form>

在表单内，class属性为 required 的文本框是必须填的。

//对输入信息进行验证
$('form:input').blur(function(){
    var $parent = $(this).parnet();
    if($(this).is('#username')){
      if(this.value==""||this.value.length<6){
        var errerMsg='请输入至少6位用户名';
        $parnet.append('<span class="formtips onError">'+errorMsg+'</span>');
    }
   }   
});

$('#send').click(function(){
   $('form.required:input').trigger('blur');
   var numError = $('form .onError').length;   //通过class为onError的元素的长度来判断是否还有错
  if(numError){
    return false; //return false 可以直接阻止表单提交
  }
  alert("注册成功");
});

Tips： 想要提示信息实时触发，将元素失去焦点时候添加事件，用户体验更佳。

2.表格应用

表格变色

这里以表格点击时高亮为例，说明表格的应用

$('tbody>tr').click(function(){
  $(this).addClass('selected')
        .siblings().removeClass('selected')  //执行时对象变为$(this).siblings()
        .end()                              //通过end()方法  变回$(this)对象
        .find(':radio').attr('checked'.true);  //Radio为用户的选择效果
});

6.jQuery与Ajax的应用

1.Ajax

Ajax简介

Ajax(Asynchoronous JavaScript and XML [异步JavaScript和XML] ) 是利用一系列交互式网页应用相关的技术所形成的结合体。

2.jQuery中的Ajax

载入HTML文档 load()方法

通过load()方法，可以将已有的html文件载入，载入时还可通过selector参数进行元素筛选。·

$(function(){
  $('#send').click(function(){    //send按钮点击后
   $('#resText').load("test.html .para"); //在resText元素中加载test.html文件中的class为".para"的内容
    
   $('#resText').load("test.html",{name:"rain",age:"22"},function(){ //POST方法带参数传递加载
     //...
   });
    
   $('#resText').load("test.html",function(responseText,textStatus,XMLHttpRequest){ //回调
     //responseText  请求返回的内容
     //textStatus  请求状态  success、error、notmodified、timeout四种
     //XMLHttpRequest  XMLHttpRequest请求对象
   });
  });
});

$.get()和$.post()方法

如果要传递参数给服务器的页面，可用$.get()或$.post()方法。

$.get(url [.data][.callback][.type])

参数名称	说明
URL	请求的URL地址
data[可选]	key/value数据
callback[可选]	载入成功时回调函数自动将请求结果和状态传递给该方法
type[可选]	服务器返回内容的格式，包括xml、html、script、json、text和default

$(function(){
  $('#send').click(function(){
    $.get("test.html",{username:$("#username").val(),
                       content:$("#content").val()},
         function(data,textStatus){
           $("#resText").html(data);  //将返回数据data添加到页面上
         });
  })
})

$.post()方法与$.get()方法的使用方式相同，但有一定区别，与GET方法和POST方法区别基本相同。

$.getScript()方法与$.getJSON()方法

可以通过$.getScript()方法动态(如按钮点击时候)的加载js文件。

$.getJSON方法可以加载JSON文件：

$.each()可以对其进行遍历

$(function(){
  $('#semd').click(function(){
     $.getJSON('test.json',function(data){
       //data:返回的数据
       $('#resText').empty()； //清空内容
       vat html=' ';
       $.each(data ,function(commentIndex,comment){  //这里返回名为comment的JSON元素
         html+='<div class="comment"><h6> + comment['username'] + '</h6><p class="para">'+comment['content']+'</p></div>';
       });
       $('#resText').html(html);
     });
  });
})

$.ajax()方法

$.ajax(options)只有一个参数，但在这个对象里包含了 $.ajax() 方法所需要的请求设置以及回调函数等信息。

参数以key/value形式存在，所有参数可选。

参数名称	说明
url	请求的URL地址
type	请求方式：GET/POST
data	发送到服务器的数据，以key/value形式发送
dataType	服务器返回内容的格式，包括xml、html、script、json、text和default
success	请求成功后的回调函数function(data,textStatus){}
...	...

$.ajax({
    type:"GET",
    url:"text.json",
    dataTyep:"json",
    success:function(data){
      //.....
    }
})

7.jQuery插件的使用和写法

8.jQuery实战

7和8闲了再更哈～～