jquery的卡通片与AJAX

by admin on 2019年9月6日

包括POST,GET,AJAX

jquery代码ajax

1. jQuery 中, $(document).ready()是什么意思?

包含在$(document).ready()中的代码只有在页面文档对象模型(DOM)准备好执行JavaScript代码时才会运行。

复制代码 代码如下:

前台调用

jquery.post(“newdoajax.asp教程x”, { max: ‘ n !’, name: ‘wsenmin’ },
function(data) { alert(data) });
jquery.get(“newdoajax.aspx”, { max: ‘ b !’, name: ‘wsenmin’ },
function(data) { alert(data) });
var superman = “max=i am jq &name= it is ajax “;
jquery.ajax({
type: “post”,
url: “newdoajax.aspx”,
data: superman,
success: function(msg) {alert(msg);}
});

2.$node.html()和$node.text()的区别?

jQuery.html()将字符串转为HTML,jQuery.text()将内容转为文本。
例子:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="div1"></div>
  <div id="div2"></div>
  <script>
    $('#div1').html('<a href="example.html">Link</a><b>hello</b>');
    $('#div2').text('<a href="example.html">Link</a><b>hello</b>');
  </script>
</body>
</html>

jsbin


<html>
<head>
<title>超简单上下翻</title>
<script type=”text/javascript”
src=”js/jquery.js”></script>
</head>
<body>
简单上下翻,函数
<script type=”text/javascript”>
function UpDown(What) {
var aList = $(“#tab a”);
var oldnode = aList.get(0);
/*
*获取最后一个元素三种方法
*/
newnode = aList[aList.length – 1];
newnode = aList.get(aList.length – 1);
newnode = $(“#tab a:last”);
if (What == “up”) return $(oldnode).before(newnode);
$(newnode).after(oldnode)
}
</script>
<div id=”tab”>
<a href=’#’> a </a><a href=’#’> b </a><a
href=’#’> c </a><a href=’#’> d </a><a
href=’#’> e </a><a href=’#’> f </a></div>
<a href=’#’ onclick=”UpDown(‘up’)”>上一个</a>
<a href=’#’ onclick=”UpDown()”>下一个</a>
</body>
</html>

复制代码 代码如下:

asp.net教程

3. $.extend 的作用和用法?

将两个或多个对象的内容合并到第一个对象中。
语法:

jQuery.extend( [deep ], target, object1 [, objectN ] )//版本1.1.4

参数:

deep
类型: Boolean
如果是true,合并成为递归(又叫做深拷贝)。
target
类型: Object
对象扩展。这将接收新的属性。
object1
类型: Object
一个对象,它包含额外的属性合并到第一个参数.
objectN
类型: Object
包含额外的属性合并到第一个参数

最简单的实现:

var a = {a:1,b:2};
var b = {c:3,d:4};
$.extend(a,b); //a会变成 {a:1,b:2,c:3,d:4}

如果要合并进去的数组与目标数组有重复,那么会有这样的操作

var a = {a:1,b:2};
var b = {b:3,c:4};
$.extend(a,b);//a会变成 {a:1,b:3,d:4}

上面的两种方法都会改变目标数组a,那么想不改变原数组,可以如下

var a = {a:1,b:2};
var b = {b:3,c:4};
var c = $.extend({},a,b)//将第一个参数目标数组设为空数组,最后赋值给c,c的结果会是 {a:1,b:3,d:4}

那么有深拷贝的需求,就可以如下

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};
//不进行深拷贝设置
$.extend( object1, object2);
/*
{
  apple: 0,
  banana: {
    price: 200
  },
  cherry: 97,
  durian: 100
}
其中 object2中的banana对象就直接覆盖了object1中的banana对象,并没有展开进行合并
*/
//设置深拷贝
$.extend(true, object1, object2);
/*
{
  apple: 0,
  banana:  {
    price: 200,
    weight: 52
  },
  cherry: 97,
  durian: 100
}
*/

深拷贝的注意:不支持第一个参数传递 false 。

如果对象的内容里包含数组的话,数组里的内容并不会进行合并,而是视为一个整体,对目标数组进行覆盖:

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100,a:[232,222]},
  cherry: [2,3,4]
};
var object2 = {
  banana: {price: 200,a:[1,2]},
  cherry:[1,2,3],
  durian: 100
};

$.extend(true,object1, object2);

/*
 {
  apple: 0,
  banana: {
    a: [1, 2],
    price: 200,
    weight: 52
  },
  cherry: [1, 2, 3],
  durian: 100
}
*/

jQuery.post(“NewDoAjax.aspx”, { max: ‘ N !’, name: ‘wsenmin’ },
function(data) { alert(data) });
jQuery.get(“NewDoAjax.aspx”, { max: ‘ B !’, name: ‘wsenmin’ },
function(data) { alert(data) });
var superMan = “max=I am jq &name= it is ajax “;
jQuery.ajax({
type: “POST”,
url: “NewDoAjax.aspx”,
data: superMan,
success: function(msg) {alert(msg);}
});

<%@ page language=”c#” validaterequest=”false”
enablesessionstate=”true”%>
<%@ import namespace=”system.data.sqlclient” %>
<%@ import namespace=”system.data” %>
<%@ import namespace=”system.configuration”%>
<%@ import namespace=”system.web.security”%>
<%@ import namespace=”system.drawing”%>
<script type=”text/c#” runat=”server”>
protected void page_loadcomplete(object sender, eventargs e)
{
response.clearcontent();
response.clear();
string yy = null;
int count = request.form.count;
int count2 = request.querystring.count;
foreach (var cv in request.form)
{
yy += cv + “:”+request.form[cv.tostring()].tostring()+” 哈好简单||
“;
}
foreach (var cv in request.querystring)
{
yy += cv + “:” + request.querystring[cv.tostring()].tostring() + ”
好简单哇哈|| “;
}
response.write(yy.substring(0,yy.length-4));
response.end();
}
</script>

4.jquery 的链式调用是什么?

它允许我们在同一个元素上一个接一个地运行多个jQuery命令。
示例:

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

C#代码:(将以下代码保存为NewDoAjax.aspx文件)

 

5. jQuery 中 data 函数的作用

在匹配元素上存储任意相关数据 或
返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
语法:

.data( key, value )
.data( obj )

参数:
key
类型:
String
一个字符串,用户存储数据的名称。(译者注:存储的数据名)
value
类型:
Object
新的数据值;它可以是任意的Javascript数据类型,包括Array 或者
Object。
obj
类型:
Object
一个用于更新数据的 键/值对

最基础的给一个元素设置不同的值,之后获取这些值

//存储数值
$('body').data('foo',52);
$('body').data('bar',{myType:'test',count:40});
$('body').data({baz:[1,2,3]});
//获取数值
$('body').data('foo');//52
$('body').data();//{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

从jQuery 1.4.3起, HTML 5 data- 属性将自动被引用到jQuery的数据对象中。
举个例子, 给定下面的HTML:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

下面所有的 jQuery 代码都能运行。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

复制代码 代码如下:

$.ajax()这个是jquery 的底层 ajax 实现。简单易用的高层实现见 $.get,
$.post 等。

6.写出以下功能对应的 jQuery 方法:

  • 给元素 $node 添加 class active,给元素 $noed 删除 class active

$node.addClass('active');
$node.removeClass('active');
  • 展示元素$node, 隐藏元素$node

$node.show();
$node.hide();
  • 获取元素$node 的 属性: id、src、title, 修改以上属性

//获取
$node.attr('id');
$node.attr('src');
$node.attr('title');
//修改
$node.attr('id','aa');
$node.attr('src','http://xxxx');
$node.attr('title','bbb');
  • 给$node 添加自定义属性data-src

$node.data('src','http://xxxx');
  • 在$ct 内部最开头添加元素$node

$ct.prepend($node);
  • 在$ct 内部最末尾添加元素$node

$ct.append($node);
  • 删除$node

$node.remove()
  • 把$ct里内容清空

$ct.empty();
  • 在$ct 里设置 html <div class=”btn”></div>

$ct.html('<div class="btn"></div>')
  • 获取、设置$node
    的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

//不包含内边距
$node.height()
$node.width()
//包括内边距
$node.innerHeight()
$node.innerWidth()
//包括边框
$node.outerHeight()
$node.outerWidth()
//包括外边距
$node.outerHeight(true)
$node.outerWidth(true)
  • 获取窗口滚动条垂直滚动距离

$(document).scrollTop();
  • 获取$node 到根节点水平、垂直偏移距离

$node.offset()
  • 修改$node 的样式,字体颜色设置红色,字体大小设置14px

$node.css({
  color:'red',
  fontSize:'14px'
})
  • 遍历节点,把每个节点里面的文本内容重复一遍

$('li').each(function(){
  $(this).text($(this).text()+$(this).text());
})
  • 从$ct 里查找 class 为 .item的子元素

$ct.find('.item');
  • 获取$ct 里面的所有孩子

$ct.children()
  • 对于$node,向上找到 class
    为’.ct’的父亲,在从该父亲找到’.panel’的孩子

$node.parents('.ct').find('.panel')
  • 获取选择元素的数量

$('div').length
  • 获取当前元素在兄弟中的排行

$("div").click(function () {
  var index = $("div").index(this);
});

<%@ Page Language=”C#” ValidateRequest=”false”
EnableSessionState=”True”%>
<%@ Import NameSpace=”System.Data.SqlClient” %>
<%@ Import NameSpace=”System.Data” %>
<%@ Import Namespace=”System.Configuration”%>
<%@ Import Namespace=”System.Web.Security”%>
<%@ Import Namespace=”System.Drawing”%>
<script type=”text/C#” runat=”server”>
protected void Page_LoadComplete(object sender, EventArgs e)
{
Response.ClearContent();
Response.Clear();
string yy = null;
int count = Request.Form.Count;
int count2 = Request.QueryString.Count;
foreach (var cv in Request.Form)
{
yy += cv + “:”+Request.Form[cv.ToString()].ToString()+” 哈好简单||
“;
}
foreach (var cv in Request.QueryString)
{
yy += cv + “:” + Request.QueryString[cv.ToString()].ToString() + ”
好简单哇哈|| “;
}
Response.Write(yy.Substring(0,yy.Length-4));
Response.End();
}
</script>

这里有几个ajax事件参数:beforesend ,success ,complete ,error
。我们可以定义这些事件来很好的处理我们的每一次的ajax请求。

7.用jQuery实现以下操作

  • 当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色

$btn = $('#button');
$btn.on('click',function(){
  $btn.css('background','blue')  
});

实现

  • 当窗口滚动时,获取垂直滚动距离

$(document).on('scroll',function(){
   var n = $(document).scrollTop();
   console.log(n);
});

实现

  • 当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色

var $div = $('div');
$div.on('mouseover',function(){
  $(this).css('background','red');
});
$div.on('mouseleave',function(){
  $(this).css('background','#fff');
});

实现

  • 当鼠标激活 input
    输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字

var $input = $('input');
$input.on('focusin',function(){
  $(this).css('border','1px solid blue');
});
$input.on('focusout',function(){
  $(this).css('border','');
  console.log($(this).val());
})
$input.on('keydown change',function(){
  var value = $(this).val().toUpperCase();
  $(this).val(value);
})

实现

  • 当选择 select 后,获取用户选择的内容

var $select= $('#select');
$select.on('change',function(){
   console.log($(this).val());
});

实现

前台调用 复制代码 代码如下:
jQuery.post(“NewDoAjax.aspx”, { max: ‘ N !’, name: ‘wsenmin’ },
function(data) { alert(data) }); jQuery.get(“NewDoAjax….

$.ajax({url: ‘stat.php教程’,

type: ‘post’,

data:{name:”keyun”},

datatype: ‘html’,

timeout: 1000,

error: function(){alert(‘error loading php document’);},

success: function(result){alert(result);}

});

asp.aspx页面代码

response.contenttype =
“application/网页特效on”;response.write(“{result: ‘” +
request[“name”] + “,你好!(这消息来自服务器)’}”);jquery 代码:
$.post(“ajax.aspx”, { action: “post”, name: “lulu” }, function (data,
textstatus){ // data 可以是 xmldoc, jsonobj, html, text, 等等. //this;
// 这个ajax请求的选项配置信息,请参考jquery.get()说到的this
alert(data.result); }, “json”);

 

jquery.post( url, [data], [callback], [type] )
:使用post方式来进行异步请求
参数:
url (string) : 发送请求的url地址.
data (map) : (可选) 要发送给服务器的数据,以 key/value
的键值对形式表示。
callback (function) : (可选)
载入成功时回调函数(只有当response的返回状态是success才是调用该方法)。
type (string) : (可选)官方的说明是:type of data to be
sent。其实应该为客户端请求的类型(json,xml,等等)
这是一个简单的 post 请求功能以取代复杂 $.ajax
。请求成功时可调用回调函数。如果需要在出错时执行函数

 

jquery.post(newdoajax.asp教程x, {
max: ‘ n !’, name: ‘wsenmin’ }, function(data) { alert(data) });
jquery.get(newdoajax.aspx, { max: ‘ b !’, name: ‘wsenmin’…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图