jQuery 的第一个例子
通过这个例子可以对jQuery的使用有个基本的认识,jQuery的事件句柄、选择器、基本语法结构,你可以复制这些代码运行感受一下。
Code
Code
.red
{
background-color: Red;
}
.green
{
background-color: Green;
}
.blue
{
background-color: Blue;
}
$(document).ready(
function() {
$("div").addClass("blue");
//$("#olID>li").addClass("green");
$("#olID>li").hover(
function() {
$(this).addClass("red")
},
function() {
$(this).removeClass("red")
});
$("#olID>li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
})
})
jQuery 选择器的使用
jQuery 能如此的流行,很重要的一点也许就是他有非常强大且灵活的选择器,下面是一个使用选择器的例子,同样你可以复制下面的代码运行一下。
Code
Code
.red
{
background-color: Red;
}
.green
{
background-color: Green;
}
.blue
{
background-color: Blue;
font-size: x-small;
font-weight: bold;
}
.yellow
{
background-color: Yellow; font-size: x-large;
}
li
{
padding: 0 3px;
}
.horizontal
{
float: left;
list-style: none;
margin: 10px;
}
.sub-level
{
background: #ffc;
}
a
{
color: #00f;
}
a.mailto
{
color: #f00;
}
a.pdflink
{
color: #090;
}
a.mysite
{
text-decoration: none;
border-bottom: 1px dotted #00f;
}
.table-heading
{
background-color: #ff0;
}
th
{
text-align: left;
}
.odd
{
background-color: #ffc;
}
.even
{
background-color: #eee;
}
.highlight
{
color: #f00;
font-weight: bold;
}
.italic
{
font-style: italic;
}
.bold
{
font-weight: bold;
}
.table-heading
{
background: #0066ff;
color: #ffffff;
line-height: 20px;/* */
height: 30px;
}
//我们使用 $(document).ready() 包住我们的 jQuery 代码,DOM 加载完毕后就可以使它所有东西都可用。
$(document).ready(function() {
$('span:contains(冯瑞涛)').addClass('red');
});
// 添加风格,让list横向排列
$(document).ready(function() {
//选择#selected-plays 下面的li元素
$('#selected-plays > li').addClass('horizontal');
//递归所有li,自定义选择器:not 排除.horizontal类的元素
$('#selected-plays li:not(.horizontal)').addClass('sub-le vel');
});
// 使用XPath 属性选择器为链接分配Class
$(document).ready(function() {
//正则表达式,获得所有内容为mailto:开始的
$('a[href^="mailto:"]').addClass('mailto');
//正则表达式,内容为.pdf 结尾的
$('a[href$=".pdf"]').addClass('pdflink');
//正则表达式,内容任何位置为finehappy的
$('a[href*="finehappy"]').addClass('mysite');
});
//
$(document).ready(function() {
//为th的父对象tr添加类
$('th').parent().addClass('table-heading');
//tr,除了内容存在th 属性的并且TR索引值匹配为偶数的元素
$('tr:not([th]):even').addClass('even');
//奇数
$('tr:not([th]):odd').addClass('odd');
//$('tr:not([th])').filter(':odd').addClass('odd'); //同样可以实现
//发现存在WPF的td
$('td:contains("WPF")').addClass('highlight');
//自定义选择器,内容中带有WPF 的同辈(同级别)为td的元素高亮显示 $('td:contains("WPF")~ td').addClass('highlight');
/* 一下这些实现可以得到上面同样的结果,代表了jQuery选择器的灵活和
链接能力
1.得到包含 Henry 的单元格,然后它的兄弟(不只是下一个的兄弟)。加入这个类:
$('td:contains("Henry")').siblings().addClass('highlight ');
2.得到包含 Henry 的单元格,得到它的父亲,然后查找所有在它里面大于0的单元格(0
是第一个单元格),加入这个类:
$('td:contains("Henry")').parent().find('td:gt(0)') .addC lass('highlight');
3.得到包含 Henry 的单元格,得到它的父亲,查找所有在它里面,然后过滤那些除了包
含 Henry的,加入这个类:
$('td:contains("Henry")').parent().find('td').not(': cont ains("Henry")') ).addClass('highlight');
4.得到包含 Henry 的单元格,得到它的父亲,查找在它的孩子里面的第二个单元格,然
后加入这个类,取消上一个 .find() ,在孩子里查找第三个单元格,并加入这个类:
$('td:contains("Henry")').parent().find('td:eq(1)').addCl ass( 'highlight').end().find('td:eq(2)').addClass('highlight');
*/
});
jQuery 的事件处理
jQuery 事件处理的例子,你可以复制下面的代码,运行并对照注释,快速理解jQuery常用的事件处理方法。
Code
.poem
{
margin: 0 5em;
}
.chapter
{
margin: 1em;
}
#switcher
{
float: right;
background-color: #ddd;
border: 1px solid #000;
margin: 10px;
padding: 10px;
font-size: .9em;
}
#switcher h3
{
margin: 0;
}
/* 按钮类 */#switcher .button
{
width: 100px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444; border-right: 3px solid #444;
}
#header
{
clear: both;
}
https://www.doczj.com/doc/dd18040386.html,rge #container .chapter
{
font-size: 1.5em;
}
body.narrow #container .chapter {
width: 400px;
}
.selected
{
font-weight: bold;
}
.hidden
{
display: none;
}
#switcher .hover
{
cursor: pointer;
background-color: #afa;
}
$(document).ready(function() {
//#switcher .button 和上面的Style对应,这句话的意思是为每一个按钮类都绑定单击事件
$('#switcher .button').click(function(event) {
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
//阻止冒泡
event.stopPropagation();
});
});
$(document).ready(function() {
//鼠标移入和移出响应hover自定义方法有两个参数,分别是移入和移出时所对应的响应方法
$('#switcher .button').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
//隐藏按钮和移入移出实现
$(document).ready(function() {
//定义一个方法名字,方便多次调用
var toggleStyleSwitcher = function() {
//toggleClass()如果存在类则删除,不存在则添加
$('#switcher .button').toggleClass('hidden');
};
//注册单击事件的行为
$('#switcher').click(toggleStyleSwitcher);
//toggle方法会交替操作参数1和参数2
$('#switcher').toggle(function() {
$('#switcher .button').addClass('hidden'); //隐藏所有
按钮,因为jquery有迭代能力所有可以使所有button有效
},
function() {
$('#switcher .button').removeClass('hidden'); //去除所有按钮的隐藏css
})
//下面的两段是演示如何注册和移出dom元素上的事件
//移除单击事件的行为
$('#switcher-narrow, #switcher-large').click(function() { $('#switcher').unbind('click', toggleStyleSwitcher);
//#switcher 此时已经没有了单击的响应方法
});
//注册单击事件的行为,这个时候再点击#switcher才能好使
$('#switcher-normal').click(function() {
$('#switcher').click(toggleStyleSwitcher);
});
});
//模拟Switcher被单击
$(document).ready(function() {
$('#switcher').click();
});
jQuery 中的效果应用(1)
使用的jQuery可以很容易的应用JavaScript动画,下面的例子演示了常用的操作,请复制下面的例子调试,并参照注释
Code
.hover
{
cursor: pointer;/*小手*/
background: #ffc;/*背景*/
}
#switcher
{
position: relative;/*相对定位否则,移动位置是无效的,默认是Sta tic*/
}
.label
{
width: 130px;
}
.button
{
width: 140px;
padding: 5px;
margin: .5em 0;
border: 1px solid #e3e3e3;
position: relative;/*相对定位否则,移动位置是无效的,默认是Sta tic*/
}
#brave
{
position: relative;/*相对定位否则,移动位置是无效的,默认是Sta tic*/
.more
{
color: Red;
}
//下面懂得功能是点击“更多”显示第二段内容
$(document).ready(function() {
$('p:eq(1)').hide(); //首先初始化先隐藏第二段p:eq(1)第二个p标记
$('span.more').click(function() {
// 如何显示第二段
//$('p:eq(1)').show('speed');
//$('p:eq(1)').show('slow');
//$('p:eq(1)').fadeIn('slow'); //透明度
//antimate(一对一对的样式属性和值,动画速度,缓动,回调函数)
$('p:eq(1)').animate({ height: "show", width: "show ", opacity: "show" }, 'slow', function() { alert('贺词已经打开'); }); / /(显示高度,显示宽度,显示不透明度,速度0.6秒,未填,返回函数)
$(this).hide(); //隐藏“更多”按钮
});
});
//下面代码的功能是单击按钮改变字体的大小
$(document).ready(function() {
$('div.button').click(function() {
var $speech = $('div.speech'); //获得div,$speech 中的$符号没有任何特别的意义只是用来标记这个变量里面是一个对象
var currentSize = $speech.css('fontSize'); //获得尺寸,备注:返的值中包含单位,比如:30px 这样需要分离
var num = parseFloat(currentSize, 10); // 获得值,parse Float的功能是获得以数字开头的字符串的数值部分,第二个参数代表十进制
var unit = currentSize.slice(-2); //获得值的单位,slice (-2)为获得从倒数第二个开始的子字符串
if (this.id == 'switcher-large') { //判断是那个按钮
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + unit); //使用的是驼峰标记,右侧的值经过合并
});
});
//点击标签类label -“按钮移动”
$(document).ready(function() {
$('https://www.doczj.com/doc/dd18040386.html,bel').click(function() {
var paraWidth = $('div.speech p').width(); // 获得宽度
var $button = $('div.button'); //
var buttonWidth = $button.width(); //
var paddingRight = $button.css('paddingRight'); //
var paddingLeft = $button.css('paddingLeft'); //
var borderRightWidth = $button.css('borderRightWidth '); //
var borderLeftWidth = $button.css('borderLeftWidth '); //parseInt()为返回字符串右侧开始的整数值
var totalButtonWidth = parseInt(buttonWidth, 10) + pa rseInt(paddingRight, 10) + parseInt(paddingLeft, 10) + parseInt(borde rRightWidth, 10) + parseInt(borderLeftWidth, 10); //计算标签按钮的宽度
alert('按钮宽度:' + totalButtonWidth);
var rightSide = paraWidth - totalButtonWidth; //总宽度-152,是移动到的右侧位置
$button.animate({ 'left': rightSide, height: 38 }, 's low'); //(动画,速度)并发两种效果1位置,2高度
});
});
//当点击H2标签时候的效果--“jQuery中的动态效果应用(所有小手指针都可以点击)”
//排队效果方法,一个接着一个的实现
$(document).ready(function() {
$('h2').click(function() {
$('div.button')
.fadeTo('slow', 0.5, function() { $(this).css('back groundColor', '#fff'); }) // 设置不透明度为50%,随后对非效果方法,进行排列使用
.animate({ left: 650 }, 'slow') // 移动位置
.fadeTo('slow', 1.0, function() { $(this).css('back groundColor', '#f00'); }) // 设置不透明度为100%,随后对非效果方法,进行排列使用
.slideUp('slow', function() { alert("按钮已经被隐藏
"); }); //由下自上的减小高度隐藏元素
});
});
//排列非效果方法,使用回调函数
$(document).ready(function() {
$('p:eq(3)').css('backgroundColor', '#fcf').hide(); //初始化设备背景色并隐藏
$('p:eq(2)').css('backgroundColor', '#cff').click(functio n() { //设置背景色并设置单击事件
var $thisPara = $(this); //保存这个元素,方便随时使用,这点很重要,否则会出现意想不到的对象调用
$thisPara.next().slideDown('slow', function() { //1向下打开他的下一个元素
$thisPara.slideUp('slow'); //2向上收起他自己,这个函数将在slideDown执行完后执行
});
});
});
// 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开
$(document).ready(function() {
$('h2, div.button, https://www.doczj.com/doc/dd18040386.html,bel, span.more, p:eq(2)').hover (function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
jQuery 的DOM操作方法元素的创建、复制、重组、修饰
jQuery 的DOM操作方法元素的创建、复制、重组、修饰。下面的例子完全可用,每一行都写有注释,请复制代码运行。
Code
.chapter
{
width: 42em;
}
a.link
{
text-decoration: none;
}
span.footnote
{
font-style: italic;
font-family: "Times New Roman" , Times, serif;
display: block;/*使其变成一块一块的*/
margin: 1em 0;
}
.text-reference
{
font-weight: bold;
}
#notes li
{
margin: 1em 0;
}
#notes
{
margin-top: 1em;
border-top: 1px solid #00ff00;
}
#footer
{
margin-top: 1em;
border-top: 1px solid #dedede;/*上边线*/
}
.inhabitants
{
border-bottom: 1px solid #dedede;
}
.pulled-wrapper
{
background: url(pq-top.jpg) no-repeat left top;
position: absolute;
width: 160px;
right: -180px;/* 定位注释框的横向位置*/
padding-top: 18px;
}
.pulled
{
background: url(pq-bottom.jpg) no-repeat left bottom;
position: relative;
display: block;
width: 140px;
padding: 0 10px 24px 10px;
font: italic 1.4em "Times New Roman" , Times, serif;
}
//为每个p元素添加属性
$(document).ready(function() {
$('p').each(function(index) {
var currentClass = $(this).attr('class');
$(this).attr('class', currentClass + ' inhabitants'); });
});
//动态为元素添加属性
$(document).ready(function() {
$('div.chapter a[href*=cnblogs]').each(function(inde
x) { //each好似for循环,他会循环集合中所有的对象,参数一的方法是对每一个对象都执行的操作,index是对象的索引
var $thisLink = $(this);
$(this).attr({
'rel': 'subsection ',
'id': 'blogslink-' + index,
'title': '更多' + $thisLink.text() + '的资料在冯瑞涛的博客',
'class': 'link'
});
});
});
//插入返回到上面连接
$(document).ready(function() {
$('新年好').prependTo('body
'); //初始化到body
$('div.chapter p:gt(0)').after('返回到上面<
/a>');
//下行等价上面的哪行代码 gt代表从第几个元素后面的p开始
//$('返回到上面').insertAfter('div.chap
ter p:gt(0)');
});
//
$(document).ready(function() {
$('
$('span.footnote').each(function(index) {
$(this)
//为每一个footnote在前面动态添加数字连接(1,2)
.before('' + (inde
x + 1) + '')
//将footnote插入到ol标签中(不带上面的连接,仅span),就是
移动标签,带有appendTo代表将自己追加到其他元素中
.appendTo('#notes')
// 向指定元素内容的后面追加标签
.append(' (内容)')
//将this包含在wrap的第一个参数中表示的标记中
.wrap('
'); });});
$(document).ready(function() {
$('span.pull-quote').each(function(index) {
//获得父元素p
var $parentParagraph = $(this).parent('p');
//设置p标签为相对定位,否则无法对其位置进行操作
jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("https://www.doczj.com/doc/dd18040386.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址.
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("https://www.doczj.com/doc/dd18040386.html,/yeer/archive/2009/06/10/1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。
jQuery 如何调用AJax(五种方法)方法一:load() 使用load方法可以帮助你加载非本地的HTML页面,并注入到当前调用的DOM中。 $.ajaxSetup({ cache: false }); var ajax_load = ""; var loadUrl = "ajax/load.php"; $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl);
}); cache: false 的意思是让浏览器不执行缓存功能,这样的话页面的内容将实时更新,否则某些浏览器会出现内容不更新的问题,当点击按钮后,因为加载过程需要时间,所以这里我们先使用.html方法来添加一个”加载中”的图片,然后执行load方法。 高级使用方法: 1. 加载页面某一部分 例如只加载ID为”pic”的部分,代码如下: $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl + " #pic"); }); 2. 递交参数执行页面加载
可以给load方法添加GET或者POST参数,代码如下: $("#load_get").click(function() { $("#result").html(ajax_load).load(loadUrl, "page=0&size=10"); }); $("#load_post").click(function() { $("#result").html(ajax_load).load(loadUrl, { page: 0, size: 10 }); }); 3. 添加回调函数 回调函数可以让你在结束AJAX调用后调用该函数,比如在页面load后提示用户加载完毕:
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("[url]https://www.doczj.com/doc/dd18040386.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。示例代码: $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
jQuery 1. 什么是jQuery?? jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。 jQuery的核心理念是Write less,Do more。 使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。 2.jQuery的特点: 利用选择器来查找要操作的节点,然后将这些节点封装成一个jQuery对象,通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。 好处:a、兼容性更好;b、代码更简洁 3.编程步骤: step1、使用选择器查找节点 step2、调用jQuery的属性和方法 4.jQuery对象与DOM对象之间的转换 1. 什么是jQuery对象?? jQuery对象是jQuery对底层对象的一个封装,只有创建了这个对象,才能使用类库中提供的方法。 2. DOM对象 ----> jQuery对象 DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。 function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象
var $obj = $(obj); $obj.html(‘hello jQuery’); } 3. jQuery对象 ----> DOM对象 jQuery对象向DOM对象转化,通过调用get方法加参数值0即可$obj.get(0)。 function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); obj.innerHTML = ‘hello jQuery’; } 5. jQuery选择器 1. 什么是jQuery选择器?? jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery 定位到要操作的元素上,使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。 2. 选择器的种类 a、基本选择器 #id根据指定的ID匹配一个元素 .class根据指定的类匹配一个元素 element根据的指定的元素名匹配所有的元素
1.jQueryAjax 编程 1.1. 通过需求回顾Ajax编程 1.1.1.需求:验证用户名是否有效 需求:添加用户名的离焦校验 html代码 JS代码: 服务端代码:
深圳网站建设 :https://www.doczj.com/doc/dd18040386.html, jquery 里面Ajax 几种不同的调用方法 我们经常会使用ajax 去调用我们的.net 里面的ashx 去实现无刷新调用数据的方法,下面我们就来讲一下我们常用的几种方法。 第一种方法是load 方法,下面是我们的代码 //url.ashx 是调用的地址,data 是返回的信息 $(".div").load("url.ashx", function (data){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,type 是参数类型,有post ,与get 两种,datatype 是返回参数的类型,id 是传入的参数 第二种方法就是$.ajax 方法,代码如下 $.ajax({ url: "url.ashx", type: "GET", dataType: "json", data: { id: "1" }, success: function (data) { //得到的信息 } }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第三种方法就是$.get 方法,代码如下 $.get("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第四种方法就是$.post 方法,代码如下 $.post("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 });
这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下: 说明:这里的datatype 为jsonp ;type 只能为get 前台请求代码如下: 代码如下: $.ajax({ type: get, url: , datatype: jsonp, jsonp: jsoncallback, success: function (result) { alert(result.success); alert(result.content); }, error: function (result, status) { //处理错误 } }); 后台处理代码validaccountsexists.aspx如下: 代码如下: string accounts = gamerequest.getquerystring(accounts); string jsoncallback = gamerequest.getquerystring(jsoncallback); response.contentencoding =system.text.encoding.utf8; response.contenttype = application/json; response.write(jsoncallback + ({\success\:\true\,\content\:\ + accounts + \})); response.end(); 希望本文所述对大家的jquery程序设计有所帮助。
JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。它并非一种新的技术,而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型: 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制 权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前 还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待 服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需 取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常 使用hack手段,如使用隐藏的或内嵌的框架(
实例
通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"https://www.doczj.com/doc/dd18040386.html,",async:false}); $("#myDiv").html(htmlobj.responseText); }); });
HTML 代码:
可选。AJAX 请求设置。所有选项都是可选的。 async 类型:Boolean 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设 置为 false。 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend(XHR) 类型:Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。 这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。 cache 类型:Boolean 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页 面。 jQuery 1.2 新功能。 complete(XHR, TS) 类型:Function 请求完成后回调函数 (请求成功或失败之后均调用)。 参数:XMLHttpRequest 对象和一个描述请求类型的字符串。 这是一个 Ajax 事件。 contentType 类型:String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定 会发送给服务器(即使没有数据要发送)。 context 类型:Object 这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对 象 (如果不设定这个参数, 那么 this 就指向调用本次 AJAX 请求时传递的 options 参数) 。 比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为 这个 DOM 元素。
JQ方法大全 网友:linuxphpmysql 发布于:2008.10.22 08:58(共有条评论) 查看评论| 我要评论 Dom: Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", function() { return this.src }); 给某个元素添加属性/值 $("元素名称").html(); 获得该元素内的内容(元素,文本等) $("元素名称").html("new stuff"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 $("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值 $("input元素名称").val(value); 设置input元素的值为value Manipulation: $("元素名称").after(content); 在匹配元素后面添加内容 $("元素名称").append(content); 将content作为元素的内容插入到该元素的后面 $("元素名称").appendTo(content); 在content后接元素 $("元素名称").before(content); 与after方法相反 $("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)$("元素名称").empty() 将该元素的内容设置为空
JQuery中的AJAX详解 目录(?)[-] load()方法 load(url,[data],[callback]) url为被加载的页面地址 data表示发送到服务器的数据,格式为key/value callback格式为:function(responseText,textStatus,XMLHttpRequest){ } //responseText:请求返回的内容 //textStatus:请求状态:success、error、notmodified、timeout这4种 //XMLHttpRequest:XMLHttpRequest对象 load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递;反之,则自动转换为POST 方式 [javascript]view plaincopyprint? 1.$("#div1").load( 2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass",则表示获取jsp页面中类名为filterClass的全部元素 3.{ 4. name :clf, age : 25 5.//经测试,变量名加引号、单引号、不加引号,后台都能取到值 6.//如果含有中文,必须用encodeURI()进行编码,然后再服务器端用decodeURI()解码即可,如 7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()}, 8.}, //也可以用数组传值,{"attr []",["clf","25","male"]} 9.function (){ 10. $("#div2").text("AJAX"); 11.} 12.); [javascript]view plaincopyprint? 1.$("div").load("wrongname.xml",function(response,status,xhr){ 2.if (status=="success")
jQuery操作Ajax和Json 嗯,自己学SSH和做项目也已有两个月了。自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。 当时我对于jQuery操作Ajax几乎不怎么了解,但是项目中有需求,所以自己也是必须要去使用,因此现在来详细讲解一下自己在项目中的操作。 功能中,有一个下拉框,里面存储的是服务商的信息,首选项是“--请选择--”,当我选择第一个下拉框中服务商信息之后,后面紧接着将会得到这个选定的服务商下的所有产品。做一个联动操作。虽然我不会用jQuery操作Ajax,但是我第一反应就是想到利用这块技术,于是自己就开始查找对应的资料了。 首先,我在Action中,将服务商的信息从数据库查找出来,保存到List集合中,将集合转发到JSP界面上,利用的是struts2标签: