JQuery介绍
主要内容:JQuery类库介绍
JQuery使用方式
主要内容:如何下载,VisutalStudio中配置
JQuery开发
主要内容:常用函数及搜索方式.
JQuery插件使用
主要内容:如何配置和使用JQuery插件

JQuery介绍

主要内容:JQuery类库介绍

JQuery使用方式

主要内容:如何下载,VisutalStudio中配置

JQuery开发

主要内容:常用函数及搜索方式.

JQuery插件使用

主要内容:如何配置和使用JQuery插件

JQuery介绍

它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

http://jquery.com/

JQuery优点

Jquery是一个优秀的Javascrīpt框架 ，其具有如下突出的优点：

（1） jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

（2） jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

（3）丰富且可扩展插件。

JQuery使用方式

打开http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=

下载1.3.2版： jquery-1.3.2.min.js 。

在Web页面中引用jquery-1.3.2.min.js

Visual Studio插件安装

下载补丁，并将其运用到VS 2008 SP1 和 VWD 2008 Express SP1版本上，该补丁会导致Visual Studio在一个JavaScript库被引用时，查找是否存在一个可选的”-vsdoc.js”文件，如果存在的话，就用它来驱动 JavaScript intellisense引擎。

将jquery-1.3.2.min.js和jquery-1.3.2.min-vsdoc.js放到Web项目中，并在一个页面中引用jquery-1.3.2.min.js

JQuery多种搜索方式
$(‘#element’);// 相当于document.getElementById(“element”)
$(‘.element’);//Class
$(‘p’);//html标签
$(“div,span,p.myClass”);//同时选择多种对象
$(“tr:odd”).css(“background-color”, “#bbbbff”);//表格的隔行背景
$(“:input”);//表单对象
$(“input[name=‘newsletter’]”);//特定的表单对象
$(“p:last”).addClass(“lastp”);//addclass为指定元素添加class,p:last为最后一个p元素
$(“p:first”).addClass(‘firstp’);//同上，只不过是第一个p元素
$(“div”).eq(1).addClass(“hignlight”);//第二个div关联css类别
$(“p > a”).hide();//隐藏p元素内的子链接，不包括孙链接
$(“p a”).hide();//隐藏p元素内的所有子链接，包括子、孙链接
$(“p[@a]”).hide();//隐藏属性中含有a属性的p标记
$(“p:eq(0)”).hide();//隐藏第一个p标记
$(“div:visible”).hide();//隐藏所有可见div
$(“input[@type]”)//属性含type的所有input元素
$(“input[@type=text]”).val(“change input text1″);//属性为type属性值为text的所有input元素
$(“input[@type=radio]”).val(“change input text1”);//属性为type属性值为radio的所有input元素    $(“img[@src*=sina]”).css(‘border’,‘4px solid’);//获取src属性中包含sina字符的img的所有元素    $(“img[@src^=http]”).css(‘color’,‘red’);//获取src属性中包口 http 字符开始img元素的所有元素  $(“img[@src$=gif]”).css(‘background’,‘green’);//获取src属性中 gif 结束字符的img的所有元素

JQuery事件
//Onload事件
$(document).ready(function(){  alert(”hello”);
});
//Click事件
$(“p”).click(function(){
var?html?=?$(“p”).text();
$(“p”).html(html); ????
})
$(“p”).hover(
function () {$(this).addClass(“hilite”);}, //鼠标放上去时
function () {$(this).removeClass(“hilite”);}//移开
);//鼠标放上去和移开的不同效果（自动循环所有p对象）
JQuery开发使用
$(“#element”).addClass(“selected”);//给对象添加样
$(‘#element’).css({ “background-color”:”yellow”, “font-weight”:”bolder” });//改变对象样式
$(“p”).text(“Some new text.”);//改变对象文本
$(“img”).attr({ src: “test.jpg”, alt: “Test Image” });//改变对象文本
$(“p”).add(“span”);//给对象增加标签
$(“p”).find(“span”);//查找对象内部的对应元素
$(“p”).parent();//对象的父级元素
$(“p”).append(“<b>Hello</b>”);//给对象添加内容
ASP.NET WebService开发
[System.Web.Script.Services.ScriptService]取消注释
方法尽量返回基本类型
尽量使用facade模式，将具体业务封装掉
JQuery Ajax使用
function increaseClickCount(){
$.ajax({
type:”POST”,
contentType:”application/json”,
url:”../../../../DesktopModules/IDCS.PortalPublish.WebService.WebUI/PortalPublish.asmx/IncreaseClickCount”,
data:”{guid:’”+document.URL+”‘}”,
dataType:”json”,
success:function(result){
if(result.d){}
}});
}
function writeAccessLog(){
var cur_url = location.href;
cur_url = cur_url.replace(location.protocol+’//’+host,”);
if(!$.cookie(cur_url)){
var title = document.title;
var host = location.host;
$.ajax({
type:”POST”,
contentType:”application/json”,
url:”../../../../DesktopModules/UnifyLogAdmin/LogAccess.asmx/InsertAccessingLog”,
data:”{pageTitle:’”+title+”‘,pageUrl:’”+cur_url+”‘}”,
dataType:’json’,
success:function(result){
if(result.d){
$.cookie(cur_url,1,30);
}}});
}
}
JQuery插件介绍
插件地址：http://plugins.jquery.com/
介绍：
jquery.cookie.js 操作cookie
jquery.liu.select.js 操作select元素
jquery.query-2.1.7.js 操作url中的参数
jquery.editable-select.1.3.1 可输入的选择 （有示例）
JQueryUI介绍
UI地址：http://jqueryui.com/
介绍：
ui.sortable.js 排序元素 （有示例）
ui.draggable.js 拖拉元素
详见示例DemoJQuery培训