使用JQuery之前,首先从官网下载库文件

http://jquery.com/

jquery-2.1.4.js和jquery-2.1.4.min.js,前者是完整无压缩版本,用于开发调试;后者是压缩版本,用于正式产品环境。在页面中引入jquery只需要将库文件放置到一个公共文件位置,然后在使用页面中直接引入即可。

 <script src="../scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕,其他关联元素还未加载完全就可以执行
$(document).ready(function(){
alert("Hello World!");
});
</script>

#1 在JQuery库中符号’$’跟字符串’jquery’是完全等价的字段;

#2 $(document).ready(function() {…..});是等待页面中所有DOM结构渲染完毕就会执行,不必等所有DOM关联的元素加载完全,可以简写成$(function() {…..});而window.onload = function() {….};则需要等所有内容加载完毕才执行;

使用$(‘#id’)获取的值永远都是对象,即使网页上没有这个元素;因此需要使用下述代码判断某个元素在网页上是否存在。

 if ($(‘#id’}.length > 0) {
// do something when the object is existing.
}

JQuery与CSS使用的选择器

基本选择器:

#1 $(‘#test’):                    选取id为test的元素

#2 $(‘.test’):                     选取所有class为test的元素

#3 $(‘p’):                           选取所有<p>元素

#4 $(‘div, p.test’):           选取所有<div>元素,选取所有<p>元素中class为test的元素

层次选择器:

#1 $(‘div span’):                            选取<div>内部所有的<span>元素

#2 $(‘div > span’):           选取<div>下一级所有的<span>元素

#3 $(‘.one + div’):           选取class为one的元素后面第一个<div>元素,等价于$(‘.one’).next(‘div’);

#4 $(‘#two ~ div’):          选取id是two的元素后面所有<div>元素,等价于$(‘#two’).nextAll(‘div’);

#5 $(‘#prev’).siblings(‘div’);        选取id是prev的元素前后左右同辈<div>元素;

过滤选择器:

#1 $(‘div : first’):             选取第一个<div>元素

#2 $(‘div  : last’):             选取最后一个<div>元素

#3 $(‘div : eq(3)’):           选取第三个<div>元素

表单选择器

JQuery常用操作:

 $("input:eq(0)").click(function(){
$("p").attr("title","选择你最喜欢的水果.");
$("#multiple").val(["选择2号", "选择3号"]);
$(":checkbox").val(["check2","check3"]);
});

#1 获取jquery元素,$(“input”)表示仅选择<input>元素,$(“:input”)表示选择所有输入元素<input>, <select>, <button>和<textarea>

#2 添加click动作处理

#3 通过attr()方法设置元素属性

#4 attr()第一个参数除了title,还可以是class

#5 获取id为multiple的元素,并设置选项;获取元素类型为checkbox的元素,并设置选项;

 $(function(){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next("div.content");
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
}); $("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
$(this).next("div.content").hide();
})
});

#1 绑定事件除了click,还可以是blur, focus, load, resize, scroll, unload, dbclick, mousedown, mouseup等

#2 $content.is()表示属性判定方法,除了visible还可以是checked等;hide和show方法在不加参数的时候相当于css(“display”, “[none|block]”);也可以添加参数[fast|normal|slow|#],最后一个表示数字,也就是在#毫秒内完成显示或者隐藏;

#3 mouseover和mouseout事件可以被hover(enterFn, leaveFn)替代;类似的还有多次的click事件可以被toggle(fn1, fn2, ….., fnx)替代,多次点击则循环执行注册的方法;

 $('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
return false; // 阻止事件冒泡
});
$("body").bind("click",function(){
$("#btn").unbind("click", clickFun2);
});

#1 如果span为content的内部元素,则如果点击了span会造成时间冒泡反应,content的click事件也会触发;为了阻止事件冒泡,可以用event.stopPropagation()或者直接返回false;

#2 与event.stopPropagation()类似,event.preventDefault()也可以阻止事件冒泡,不过其还有更大的影响,就是阻止缺省的动作,这在提交需要进行表单验证的表单事件中非常有用;

#3 另外event还携带了很多有用的信息,type表示触发的事件类型,target表示触发事件的元素,pageX和pageY表示触发事件点光标在页面的位置,which表示输入设备的类型;

#4 方法unbind可以去除指定元素上某种事件类型的某个相应方法;

 $("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked', true);
});
$("#send").click(function(){
var str="你选中的是:\r\n";
$('[name=items]:checkbox:checked').each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});

#1 $(‘[name=items]:checkbox’)表示选择所有name为items的checkbox类型元素,其中name可以修改成type,表示以类型匹配;$(‘[name=items]:checkbox:checked’)进一步表示所有被勾选的元素;

#2 元素选择器还可以为:$('input[type=checkbox][name=items]');

#3 arrt(‘checked’, true)

 $('form :input').blur(function(){
………..
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("it works with no errors.");
});

#1 keyup()和focus()方法表示对input元素的输入值进行实时判断,triggerHandler(‘blur’)表示仅触发blur事件,不会触发浏览器缺省的动作;trigger(‘blur’)不仅触发指定的事件还会触发缺省动作,同时光标会从当前触发元素移开,所以实时判断输入值需要使用triggerHandler;

#2 #send表示form提交按钮的设计,在提交的时候触发blur事件进行验证,如果有errors则返回false表示终止提交动作;

对比$(document).ready(function() {……});和window.onload = function() {};的区别:

#1 前者只要DOM元素下载完毕(不需要图片或者音频文件等下载完毕)就可以执行,后者需要网页中所有元素都下载完毕才执行;

#2 后者的onload属性仅加载最后一个被绑定的方法,因此页面里仅有一个onload方法可以执行;前者可以多次申明,并按照申明顺序加载执行;

#3前者等价于$(function() {…..});后者等价于$(window).load(function() {……});

JQuery使用Ajax

Ajax最大的优势在于不需要用传统的提交Form并刷新整个页面的方式来提交数据,而是通过XMLHttpRequest向服务器异步提交数据并获取返回值;但Ajax也有自身的不足,XMLHttpRequest对象不能很好地兼容各种浏览器,浏览器的状态改变不能被前进和回退按钮记录,搜索引擎对JS的支持不足等;

JQuery对Ajax的封装分三层,最底层为$.ajax(),最常用的一层为$.load(),$.get(),$.post(),还有一层为$.getScript(),$.getJSON();

 

$().load(url [, dataIn] [, callBackFn])

 $("#resText").load("ajax.html", {name: "leo", age: "22"}, function(responseData, textStatus, XMLHttpRequest) {
alert( $(this).html() ); //在这里this指向的是当前的DOM对象,即 $("#iptText")[0]
alert(responseData); //请求返回的内容
alert(textStatus); //请求状态:success,error
alert(XMLHttpRequest); //XMLHttpRequest对象
});

#1 url表示请求的目标地址,dataIn表示传入参数,callBackFn表示无论load成功与否都执行的回调方法;

 

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

#1 callBack表示仅在get调用成功之后才执行,否则不执行;

#2 type表示不同的返回数据类型,比如html、json、text等;

#3 post与get函数头类似,不过有不少区别;

$().ajax(options)

#1 options包含所有以key/value存在的参数;

#2 参数类型有url, type, timeout, data, dataType, beforeSend,success, error, complete等;

JQuery还提供了一些列的全局函数,在Ajax请求的各种状态下自动触发

$().ajaxStart(function () { });        ajax请求开始之后触发

$().ajaxStop(function() { });         ajax请求结束之后触发

$().ajaxError(function() { });        ajax请求发生错误的时候触发

$().ajaxSuccess(function() { });   ajax请求成功的时候触发

引入插件jquery.validate.js,并通过元素的name属性关联字段和验证规则进行验证,这种方法实现了行为与结构的分离;

         $("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
}
});

#1 #commentForm表示待验证的表单的id,username表示需要被验证的元素的name;

#2 validation验证的信息缺省为en,可以引入jquery.validation.message_xx.js修改显示语言;

Css选择器和JQuery基本编程接口的更多相关文章

  1. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  2. CSS选择器与jQuery选择器的异同:一些特殊的选择器

    在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类.下面是一些jQuery扩展的选择器:(来自http://www.cnblogs.c ...

  3. Jmeter之CSS选择器/JQuery选择器关联

    选择器: CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 JQuery选择器 Chrome - 复制CSS选择器 Google Chrome在 ...

  4. jQuery css()选择器使用说明

    css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...

  5. jquery live()只支持css选择器

    昨天在处理过keypress键盘事件后,今天要把用户在页面上动态添加的字段条目加上删除功能,就是在每个字段后面加上一个漂亮的小按钮,当用户点击这个按钮,相应的条目就被从数据库中删除. 为了实现这种功能 ...

  6. jQuery选择器与CSS选择器

    1. 通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul ...

  7. js jquery css 选择器总结

    js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...

  8. css中:not()选择器和jQuery中.not()方法

    因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ...

  9. jQuery原理系列-css选择器实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...

随机推荐

  1. Apache Thrift 在Windows下的安装与开发

    Windows下安装Thrift框架的教程很多.本文的不同之处在于,不借助Cygwin或者MinGW,只用VS2010,和Thrift官网下载的源文件,安装Thrift并使用. 先从官网 下载这两个文 ...

  2. Selenium | 简单使用

    需求分析: 登录百度首页,对百度首页进行截屏操作,保存文件 核心代码如下: //配置浏览器 System.setProperty("webdriver.chrome.driver" ...

  3. Mysql的外键

    概念:如果一个实体A的某一字段,刚好指向或引用另一个实体B的主键,那么实体A的这个字段就叫作外键,所以简单来说,外键就是外面的主键,就是其他表的主键. 例: 以上的学生表的班级字段,就是一个外键! 其 ...

  4. mysql索引原理及创建与查询

    索引介绍 一:为什么要有索引 索引是用来优化查询效率(速度)的 没有索引的话,对于大数据的表,就只能每次都遍历一遍,数据量越大,耗时越多有索引的话,可以提升好几个数量级的速度 一般的应用系统,读写比例 ...

  5. 洛谷P2762 太空飞行计划问题(最大权闭合图)

    题意 有$m$个实验,$n$中器材,每个实验需要使用一些器材 每个实验有收入,每个器材有花费 最大化收入 - 花费 Sol 最大权闭合图的经典应用 从$S$向每个实验连流量为该实验收入的边 从每个器材 ...

  6. JS进阶-特殊形式的函数-内部私有函数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)

    display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0  隐藏,但是其依旧占用位置: height.width:0 和displa ...

  8. ES6学习笔记(11)----Proxy

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Proxy1.概述    Proxy可以用来修改对象的默认操作    let obj = {na ...

  9. Ajax深入理解

    Ajax  Asynchronous JavaScript and XML 异步的JavaScript和XML ajax通过与后台服务器进行少量的数据交换,ajax可以使页面实现异步更新,即不需要重新 ...

  10. iOS UI异步更新:dispatch_async 与 dispatch_get_global_queue 的使用方法

    GCD (Grand Central Dispatch) 是Apple公司开发的一种技术,它旨在优化多核环境中的并发操作并取代传统多线程的编程模式. 在Mac OS X 10.6和IOS 4.0之后开 ...