jQuery与Ajax

最新推荐文章于 2021-08-05 16:55:31 发布
最新推荐文章于 2021-08-05 16:55:31 发布
阅读量482 收藏 1
点赞数
分类专栏： 前端 文章标签： jquery ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44318484/article/details/114377123
版权

文章目录

jQuery知识点总结

1、jQuery简单介绍

  • jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

  • jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

    Document 对象 :每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

    Document 对象集合:

集合描述
[all]提供对文档中所有 HTML 元素的访问。
[anchors]返回对文档中所有 Anchor 对象的引用。
applets返回对文档中所有 Applet 对象的引用。
[forms]返回对文档中所有 Form 对象引用。
[images]返回对文档中所有 Image 对象引用。
[links]返回对文档中所有 Area 和 Link 对象引用。
Document 对象属性
属性描述
body提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 。
cookie设置或返回与当前文档有关的所有 cookie。
domain返回当前文档的域名。
lastModified返回文档被最后修改的日期和时间。
referrer返回载入当前文档的文档的 URL。
title返回当前文档的标题。
URL返回当前文档的 URL。
Document 对象方法
方法描述
close()关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName()返回带有指定标签名的对象集合。
open()打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()向文档写 HTML 表达式 或 JavaScript 代码。
writeln()等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

HTML DOM Element 对象

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释是注释节点

HTML DOM Event 对象

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性此事件发生在何时…
onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中。
onsubmit确认按钮被点击。
onunload用户退出页面。
鼠标 / 键盘属性
属性描述
altKey返回当事件被触发时，“ALT” 是否被按下。
button返回当事件被触发时，哪个鼠标按钮被点击。
clientX返回当事件被触发时，鼠标指针的水平坐标。
clientY返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时，“CTRL” 键是否被按下。
metaKey返回当事件被触发时，“meta” 键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时，鼠标指针的水平坐标。
screenY返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey返回当事件被触发时，“SHIFT” 键是否被按下。
IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

属性描述
cancelBubble如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。
标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性描述
bubbles返回布尔值，指示事件是否是起泡事件类型。
cancelable返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget返回其事件监听器触发该事件的元素。
eventPhase返回事件传播的当前阶段。
target返回触发此事件的元素（事件的目标节点）。
timeStamp返回事件生成的日期和时间。
type返回当前 Event 对象表示的事件的名称。
标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法描述
initEvent()初始化新创建的 Event 对象的属性。
preventDefault()通知浏览器不要执行与事件关联的默认动作。
stopPropagation()不再派发事件。

下载链接：jQuery官网，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。

中文文档：jQuery AP中文文档

2、jQuery的引入方式有两种：

1.直接下载文件到本地（最常用），从本地中导入

2.使用文件的网络地址，就像我们img标签里面的那个src的用法差不多。

引入完之后，就可以直接使用jQuery的语法来写了，但是还是要写在script标签里面，并且要注意引入顺序，先引入文件，再在script标签里面写jQuery的代码，先导入再使用。

3、jQuery对象和dom对象

  • jquery对象找到的标签对象称为–jQuery对象，jQuery对象只能使用自己的对象方法
    • 其中this指针指向的便是选择器与筛选器所产生的jQuery对象
  • 原生js找到的标签对象称为–dom对象，DOM对象只能使用dom对象的方法 不能使用jQuery对象的方法
jQuery对象和dom对象之间可以互相转换

jquery转换dom
	$('#d1')[0]

dom转换jQuery
    var a=$(#d1)[0]
    $(a)
    $($(#d1)[0])

$($('div')[0]).text().trim();
"床前明月光"

$($('div')[0]).text('安文最帅');

$($('div')[0]).text('安文最帅').text();
"安文最帅"

4、jQuery选择器

  • 选择器可能找到的是多个标签，是一个数组。
  • jQuery对象可以直接只用jQuery的方法，对找到的所有标签进行统一设置；
  • 如果要单独设置选中的所有标签中的某个标签可以通过索引取值的方式找到，按后注意 通过索引得到的标签 是个dom对象 ( ( ((#d1)[0])
jquery('#d1') 找到id为d1 的标签
简写$('d1')

5、基本选择器（同css）

  • id选择器：

    • $("#id")

    #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容

  • 标签选择器

    • $("tagName")

  • class选择器：

    • $(".className")

  • 所有元素选择器：

    • $("*")

  • 配合使用：

    • $("div.c1") 找到有c1 class类的div标签

  • 组合选择器：

    • $("#id, .className, tagName")
层级选择器：（同css）x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

6、基本筛选器（选择之后进行过滤）：

  • :first // 第一个
  • :last // 最后一个
  • :eq(index)// 索引等于index的那个元素
    • $('li:eq(1)')；
    • $('li:eq(-1)').text();
  • :even // 匹配所有索引值为偶数的元素，从 0 开始计数
  • :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
  • :gt(index)// 匹配所有大于给定索引值的元素
  • :lt(index)// 匹配所有小于给定索引值的元素
  • :not(元素选择器)// 移除所有满足not条件的标签
  • :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
    • $('li:has(span)');
$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
$("li:not(:has(c1)")

7、属性选择器：

  • [attribute]
  • [attribute=value]// 属性等于
  • [attribute!=value]// 属性不等于
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

8、表单筛选器

多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些

input标签中type属性为这个值的input标签
:text
:password	实例：$(':password');
:file
:radio
:checkbox
:submit
:reset
:button

9、标签操作

(1）样式类操作
  • addClass();// 添加指定的CSS类名。
  • removeClass();// 移除指定的CSS类名。
  • hasClass();// 判断样式存不存在
  • toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例代码
	$('.c1').addClass('c2');
	$('.c1').removeClass('c2');
	$('.c1').hasClass('c2');
	$('.c1').toggleClass('c2');
(2）css样式
$('.c1').css('background-color','red');  
同时设置多个css样式
$('.c1').css({'background-color':'yellow','width':'200px'})
(3) 位置操作
  • 查看位置
$('.c2').position();  //查看相对位置 
	{top: 20, left: 20}
$('.c2').offset();    //查看距离窗口左上角的绝对位置
	{top: 28, left: 28}

  • 设置位置

    $('.c2').offset({'top':'20','left':'40'});
(4) jQuery绑定点击事件的写法

  • jquery绑定点击事件

    $('.c1').click(function () {
    $(this).css('background-color','green');
})

点击事件和滚动事件的示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: green;
            height: 1000px;
            width: 100px;
        }
        .c3{
            background-color: blue;
            height: 1000px;
            width: 100px;
        }
        .s1{
            position: fixed;
            left:20px;
            bottom: 20px;
            height: 40px;
            width: 80px;
            background-color: purple;
            line-height: 40px;
            text-align: center;

        }
        .s1 a{
            color: white;
            font-size: 14px;
            text-decoration: none;
        }
        .hide{
            display: none;
        }


    </style>
</head>
<body>
<!--<a name="top">这里是顶部</a>-->
<!--<a>这里是顶部</a>-->
<span>顶部位置</span>
<div class="c1"></div>

<button class="change-postion">走你</button>

<div class="c2"></div>
<div class="c3"></div>

<span class="s1 hide">
    <!--<a href="#top">返回顶部</a>-->
    <span>返回顶部</span>

</span>


<script src="jquery.js"></script>
<script>
	//点击事件来改变标签位置
    $('.change-postion').click(function () {
        $('.c1').offset({top:200,left:200});
    });
    
	//滚动事件,监听滚动距离来显示或者隐藏标签
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() >=200){
            $('.s1').removeClass('hide');
        }else {
            $('.s1').addClass('hide');
        }
    });
    
	// 回到顶部,scrollTop设置值
    $('.s1').click(function () {
        $(window).scrollTop(0);
    })

</script>

</body>
</html>
(5)尺寸
$('.c1').height();  //content 高度
$('.c1').width();   //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度

示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            background-color: green;
            padding: 20px 30px;
        }
    </style>
</head>
<body>
<div class="c1"></div>

<script src="jquery.js"></script>
</body>
</html>
(6) 文本操作
  • html()//取得第一个匹配元素的html内容，包含标签内容
  • html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
  • text()// 取得所有匹配元素的内容，只有文本内容，没有标签
  • text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');
(7)值操作

  • 获取值

    • input type='text’的标签–$('#username').val();

    • input type='radio’标签获取被选中的标签的值 — $(':radio:checked').val();

    • input type='checkbox’标签获取被选中的标签的值 — 直接$(':checkbox:checked').val();是不行的,需要循环取值

      var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
	console.log(d.eq(i).val());
}

    • 单选select — $('#city').val();

    • 多选select — $('#author').val(); // ["2", "3"]

  • 设置值

    • input type='text’的标签 — $('#username').val('李杰');

    • input type='radio’标签 — $('[name="sex"]').val(['3']);
      * 如果 $('[name="sex"]').val('3'),所有标签的值都变成了**‘3’**;

    • input type='checkbox’设置值 —$('[name="hobby"]').val(['2','3'])
      单选select —$('#city').val('1'); option value='1'
      多选select —$('#author').val(['2','3'])

(8)属性操作
  • attr(attrName)// 返回第一个匹配元素的属性值
  • attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
  • attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
  • removeAttr(attrName)// 从每一个匹配的元素中删除一个属性
示例:
	设置单个属性
		$('.c1').attr('xx','oo');
	设置多个属性
		$('.c1').attr({'age':'18','sex':'alex'});
	查看属性
		$('.c1').attr('属性名');
    	$('.c1').attr('xx');
    删除属性
    	$('.c1').removeAttr('xx');

  • prop – 针对的是checked\selected\disabled…

    • 查看标签是否有checked属性,也就是是否被选中

      attr $(':checked').attr('checked'); //checked -- undefined
prop $(':checked').prop('checked'); //true  -- false

    • 通过设置属性的方式来设置是否选中:

      $(':radio').eq(2).prop('checked',true);  true和false不能加引号
$(':radio').eq(2).prop('checked',false);

简单总结: 

<center>1.对于标签上有的能看到的属性和自定义属性都用attr</center>
<center>2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()</center>
(9)文档处理

  • 添加到指定元素内部的后面

    $(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
	#添加字符串照样能识别标签  *****
	$('#d1').append('<a href="http://www.jd.com">京东</a>');

  • 添加到指定元素内部的前面

    $(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
示例
$('a').prependTo($('div'));

  • 添加到指定元素外部的后面

    $(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

  • 添加到指定元素外部的前面

    $(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

  • 移除和清空元素

    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还

    $('div').remove();
$('div').empty();

  • 替换

    • replaceWith()
    • replaceAll()
  • 示例:
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = 'xxx';

$('span').replaceWith(a);
$(a).replaceAll('span');

  • 克隆

    • clone()
	<button class="btn">屠龙宝刀,点击就送!</button>	

    $('.btn').click(function () {
        // var a = $(this).clone(); //克隆标签
        var a = $(this).clone(true);  //连带事件一起克隆
        $(this).after(a);

    })
<1> 事件

事件绑定方式 两种方式

<script>
    // 方式一
    // $('#d1').click(function () {
    //     $(this).css({'background-color':'green'})
    // })


    // 方式二  on绑定
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'})
    })
</script>
<2>常用事件
<div class="c1"></div>

click(function(){...})
	$('#d1').on('click',function () {
        $(this).css({'background-color':'green'})
    })
hover(function(){...})
	//鼠标悬浮 触发事件
    $('.c1').hover(
        //鼠标放上去
        function () {
            $(this).css({'background-color':'blue'});
        },
        function(){
            $(this).css({'background-color':'black'});
        }
    );


blur(function(){...})
	//失去光标(焦点)时触发事件 使div变色
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'pink'})
    })
focus(function(){...})  //获取光标时触发事件 使div变色
	$('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'})
    })
                 
change(function(){...}) //内容发生变化，input，select等
	//与内容发改变时触发的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc')
    })


keyup(function(){...})	//键盘抬起触发事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
    })


keydown(function(){...})	//键盘按键按下事件  参数e/event
	$(window).keydown(function (e) {
        console.log(e.keyCode) //每个键都有一个keycode键 ，通过不同的值触发不同的事件
        if(e.keyCode===37){
            $('.c1').css({'background-color':'green'})
        }else if(e.keyCode===39){
            $('.c1').css({'background-color':'balck'})
        }
        else{
            $('.c1').css({'background-color':'yellow'})
        }
    })


mouseenter(function(){...})	// 鼠标悬浮  等同于hover事件
mouseout(function(){...})
	$('.c1').mouseenter(function () {
        $(this).css({'background-color':'blue'});
    });
    $('.c1').mouseout(function () {
        $(this).css({'background-color':'yellow'});
    });


//鼠标悬浮 只触发一次
    $('.c2').mouseenter(function () {
        console.log('你变了');
    });
//鼠标悬浮  连续触发
    $('.c2').mouseover(function () {
        console.log('你变了');
    })
  • mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
<3>input事件
  • 实时监听input输入值变化示例：
    • input值变化事件：百度搜索的效果，这叫做input事件，
    • 看代码：只要input框里面的值发生变化就触发某个事件，注意input事件不能直接绑定，必须用on绑定才行，$('#d1').input(function{})是不对的；只能这样绑定$('#d1').on('input',function(){})才行
<script src="jQuery.js"></script>
百度一下 <input type="text" id="search">

<script>
    $('#search').on('input',function () {
        console.log($(this).val());
    })
</script>
<4>事件冒泡
  • 冒泡：因为html可以嵌套，如果你给儿子标签绑定了点事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件
<body>
<script src="jQuery.js"></script>

<div id="d1">
    <div id="d2"></div>
</div>

<script>
    //冒泡
    $('#d1').click(function () {
        alert('父级标签')
    })
    $('#d2').click(function () {
        alert('子级标签')
    })
</script>
</body>
<5>阻止后续（冒泡）事件发生
  • e.stopPropagation();//用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）
$('#d1').click(function () {
        alert('父级标签')
    })
    $('#d2').click(function (e) {	//这个参数e(只是个形参，写evt或者event名字的也很多)表示当前事件本身，这个事件也是一个对象
        alert('子级标签')
        // return false;	//这个也可以阻止
        e.stopPropagation();//用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）
    })
<6>事件委托
  • 事件委托:是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
<script src="jQuery.js"></script>
<div id="d1">
    <button class="c1">爱的磨砺转圈圈</button>

</div>

<script>
    // $('.c1').on('click',function () {
    //     alert('你变了');
    //     var btn=document.createElement('button');
    //     $(btn).text('爱的磨砺转圈圈');
    //     $(btn).addClass('c1');
    //     console.log(btn);
    //     $('#d1').append(btn);
    // })

    //事件委托  将'.c1'委托给'#d1'
    $('#d1').on('click','.c1',function () {
        alert('你变了');
        var btn=document.createElement('button');
        $(btn).text('爱的磨砺转圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        $('#d1').append(btn)
    })
</script>
</body>
</html>
<7>页面载入
	//将js代码写到head标签和写道body标签下面的作用是不同的吗，写在head标签里面的话，如果你写了操作某个标签的内容的话，那个标签还没加载出来，先加载了你的js代码，就找不到这个标签，所以不会生效，所以写在body标签最下面是一种解决办法，还有一种办法就是window.οnlοad=function(){js的代码}，等页面上所有的元素都加载完，在执行这里面的js代码，还记得吗？，但是这个window.onload有个缺点，这个缺点就是这个操作时给window.onload赋值，如果你自己写了两个js文件，每个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入的文件的window.onload里面的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果，还有一个问题就是，window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码，导致有些效果的加载比较慢，所以我们使用下面的写法，不存在覆盖问题，而且只要文档加载完就触发，不需要等着一些图片啊视频啊什么的，加载js效果的速度快。
1.jQuery文件要在使用jQuery的代码之前引入
2.js代码最好都放在body标签下面或者里面的最下面

3.window.onload:
	window.onload = function () {
            $('.c1').click(function () {
                $(this).css({'background-color': 'green'});
            })
        }

4.页面载入:
$(function () {
            $('.c1').click(function () {
                $(this).css({'background-color': 'green'});
            })
        })
$(document).ready(function{});


与window.onload的区别:
　　　1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
　　　2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
   


示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
        // window.onload 有覆盖现象,会被后面的window.onload给重新赋值
        // window.onload = function () {
        //     $('.c1').click(function () {
        //         $(this).css({'background-color':'green'});
        //     })
        // }

        
        $(function () {
            $('.c1').click(function () {
                $(this).css({'background-color':'green'});
            })
        });
    </script>
    <script src="页面载入.js"></script>
    <style>
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

10、Ajax

(1)什么是 AJAX？

  • AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
    • 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
    • 使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

您可以在我们的 jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。

您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识。

(2)关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

  • 通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON

  • 能够把这些外部数据直接载入网页的被选元素中

(3)jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数描述
jQuery.ajax()执行异步 HTTP (Ajax) 请求。
.ajaxComplete()当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()设置将来的 Ajax 请求的默认值。
.ajaxStart()当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()当 Ajax 请求成功完成时显示一条消息。
jQuery.get()使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()使用 HTTP POST 请求从服务器加载数据。
.serialize()将表单内容序列化为字符串。
.serializeArray()序列化表单元素，返回 JSON 数据结构数据。
<button class="send_Ajax">send_Ajax</button>
<script>
       $(".send_Ajax").click(function(){
           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"chao",password:123},
               success:function(data){
                   console.log(data)
               },
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },
               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },
               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },
                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }
           })
       })
</script>
(4) Query.ajax中success 和complete 区别
$.ajax({
    type: "post",
   url: url,
   dataType:'html'/'json',
   success: function(data) { },
   complete: function(XMLHttpRequest, textStatus) { },
   error: function(){}
});
  • success ： 当请求成功时调用的函数。这个函数会得到一个参数：从服务器返回的数据。当请求成功时调用函数，即status==200。
  • **complete ：**当请求完成时调用的函数。这个函数会得到两个参数：XMLHttpRequest对象和一个描述请求成功的类型的字符串。当请求完成时调用函数，即status==404、403、302…。

所以，在写success或者complete的方法时，注意传入的参数，和使用传进来参数对象来解决我们的问题

参数列表：

参数名类型描述
urlString(默认: 当前页地址) 发送请求的地址。
typeString(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeoutNumber设置请求超时时间（毫秒）。此设置将覆盖全局设置。
asyncBoolean(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSendFunction发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request }
cacheBoolean(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
completeFunction请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentTypeString(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
dataObject, String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
dataTypeString预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:“xml”: 返回 XML 文档，可用 jQuery 处理。“html”: 返回纯文本 HTML 信息；包含 script 元素。“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。“json”: 返回 JSON 数据 。“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }
globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processDataBoolean(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
successFunction请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

(5) AJAX的优缺点

优点：

1.AJAX使用JavaScript技术向服务器发送异步请求；

2.AJAX请求无须刷新整个页面；

3.因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

头秃啊头秃啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery 与 Ajax
Wzc0720的博客
10-28 3733
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
Ajax和JQuery
热门推荐
chenjia的博客
04-06 1万+
Ajax简介 Ajax的全称是：Asynchronous JavaScript And XML，指的是异步 JavaScript 及 XML（其实主要用的就是javascript技术），它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 Ajax的特点是异步 ，比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是...
ajax和jquery什么关系,jquery和ajax的关系是什么样的？
weixin_42489088的博客
08-05 3373
一直以来我们都知道jquery能够调用ajax，就好像理所当然一样，小伙伴们知道它们到底是什么关系吗?本篇文章就一起来了解下。Jquery是一种JavaScript框架，而Ajax(Asynchronous JavaScript andXML)是异步JavaScript和XML。Jquery是JavaScript的框架，而Ajax是JavaScript的一种应用!就是说Jquey是JavaScri...
jquery和ajax 的区别
King-Blog
07-11 1227
jQuery是javascript的一个框架，也就是有人做好了很多功能，你直接拿来用就好了。比如实现Ajax。纯javascript，你可能需要些好多函数，来新建对象，捕捉事件，处理异常等。但用jQuery，你只要按规则调用一个方法就行。当然，jQuery还有很多其他功能，详见jquery手册。 ajax是javascript的一个应用方向，主要是通过javascript异步访问服务器端的数据（
jQuery与Ajax的应用
weixin_30614587的博客
09-28 86
【jQuery中的Ajax】 首先说说Ajax的优势：不需要插件支持；优秀的客户体验；提高web程序的性能：在于传输数据的方式，它是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送；减少服务器和带宽的负担。Ajax的不足浏览器对XMLHttpRequest对象的支持度不足；破坏了浏览器前进、“后退”按钮的正常功能；对搜索引擎支持不足：通常搜索引擎都是通过爬虫程序来对互联...
jQuery与Ajax教程WORD版
07-22
资源名称：jQuery与Ajax教程 WORD版内容简介：本文档是jQuery与Ajax教程；jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写Javaｓｃｒｉｐｔ代码的习惯。希望本文档...
jQuery与Ajax以及序列化
01-19
关于AJAX 所谓Ajax，全名Asynchronous JavaScript and XML。（也就异步的JS和XML） 简单点来讲就是不刷新页面来发送和获取数据，然后更新页面。 Ajax的优势 •无需插件支持 •优秀的用户体验 •提高web程序的性能...
JQuery与Ajax常用代码实现对比
10-29
JQuery与Ajax常用代码实现对比，大家可以看下，根据实际情况选用。
js原生ajax与jquery的ajax用法对比
职业炮灰的博客
04-06 1559
 js原生ajax与jquery的ajax用法对比   一、Ajax概述 AJAX（AsynchronousJavascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。 AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新...
JQuery、AJAX与Javascript之间的父子关系
许德鹏
01-29 5557
JQuery、AJAX都是Javascript的一个框架，各有各自不同的功能，如果把Javascript比作父亲的话，JQuery和AJAX就是Javascript的亲生儿子。在Javascript中非常复杂的功能，让他们实现起来是极其的方便快捷。下面来总结一下他们各自的功能及特点和应用的场合。 JQuery是轻量级的js库，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF1.
jQuery Ajax 登陆和注册页面
06-01
带有自动验证插件，
JQuery和ajax
weixin_43654274的博客
04-09 193
1、jQuery 属于一种前端级的开发语言，该语言基于JavaScript而来, 实现js脚本封装。 js:document.getElementByID(id); ->获取页面中组件元素对象 jQuery: $("选择器+选择器名称") -->页面组件对象 选择器： HTML选择器、ID选择器#、Class选择器. ...
JQuery的事件委托方法
生活步步是坎坷，笑到最后是大哥
07-28 4884
1.blind 定义和用法：主要用于给选择到的元素进行事件绑定 语法：blind(“事件类型”，function(){ }); 特点;适用于静态页面，只能给调用它时已存在的元素绑定，不能给未来新增的元素绑定 当页面加载完时，才进行blind； 2.live 定义：主要用于给选择到的元素进行事件绑定 语法：live(“事件类型”,函数名); 特点：live并没有将事件绑定到自身（this）上，而是绑...
Ajax和jQuery
Yuncoco的博客
06-03 2162
一.什么Ajax? Ajax:异步的Javascript和XML,用于完成局部刷新 XML是用于数据传输，现在外面开始都使用JSON 二.原生的Ajax实现方式 xhr = new XMLHttpRequest() : 通过new它可以创建一个ajax对象【兼容IE需要创建ActiveXObject】 2.1 方法(函数) xhr.open(methodType,methodUrl,...
JS与JQ与AJAX的使用
沙漠皇帝本拉登
03-17 1179
什么是Ajax Ajax=异步JavaScript和XML 简短的说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示, 使用AJAX的应用程序案例:谷歌地图,腾讯微博,优酷视频,人人网等等 XMLHttpRequest对象 所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject) XMLHttpRequest用于...
jQuery_事件绑定如何用on实现事件委托
jiang7701037的博客
01-23 3726
*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back
jQuery 事件委托
weixin_43043455的博客
09-17 794
自从学习了jQuery，发现很多事件没办法记住，往往学着后面的忘着前面的，很苦恼，所以捡出一些容易忘记的方法单独记录在这里，以供日后复习用到。 我们在绑定事件时（比如点击事件），只能绑定在HTML页面已有的元素上（比如在上），当使用js创建新的div元素时，新的元素便没有这个事件，如果我想还有，那怎么办，这里就得用到事件委托。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html ...
JQ与ajax
qq247788490的专栏
04-22 313
$.ajax({    url:'xxx.php',    data:'name=dage&&id=12',    type:'post',    success:function(data){......},   error:function(){                      ......} }) $.get('xxx.php',{"name":"wangb
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托
orange0111的博客
11-13 3742
本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思） 高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子 有三个同事预计会在周一收到快递。为签收快递，有两种办法
jquery与Ajax联系
最新发布
09-05
### 回答1： ...总的来说，jQuery与Ajax密不可分，它提供了更简洁易用的方法和函数来简化Ajax的操作，同时也提供了用于处理Ajax响应的函数。这使得我们可以更方便地开发出功能丰富、流畅的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值