杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

杨校

发布于 2018-12-06 10:54:05

8.2K0

发布于 2018-12-06 10:54:05

文章被收录于专栏：Java技术分享圈 Java技术分享圈Java技术分享圈

1 筛选[掌握]

 筛选与之前“选择器”雷同，筛选提供函数

1.1 过滤

eq(index|-index)，获取第N个元素 •index：一个整数，指示元素基于0的位置,这个元素的位置是从0算起。 •-index：一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)
first()，获取第一个元素
last()，获取最后个元素
hasClass(class)，检查当前的元素是否含有某个特定的类，如果有，则返回true。
filter(expr|obj|ele|fn)，筛选出与指定表达式匹配的元素集合。
返回值:Booleanis(expr|obj|ele|fn)，根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
map(callback)，将一组元素转换成其他数组（不论是否是元素数组）
has(expr|ele)，保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not(expr|ele|fn)，删除与指定表达式匹配的元素
slice(start, [end])选取指定范围匹配的子集 •start 开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。 •end 结束选取自己的位置，如果不指定，则就是本身的结尾

1.2 查找

children([expr])，取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 •注意：考虑子元素而不考虑所有后代元素。
find(expr|obj|ele)，搜索所有与指定表达式匹配的元素
next([expr])，取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll([expr])，查找当前元素之后所有的同辈元素。
nextUntil([exp|ele][,fil])，查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
offsetParent(),返回第一个匹配元素用于定位的父节点。 •这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
parent([expr]),取得一个包含着所有匹配元素的唯一父元素的元素集合
parents([expr]),取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
map(callback)，将一组元素转换成其他数组（不论是否是元素数组）
has(expr|ele)，保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not(expr|ele|fn)，删除与指定表达式匹配的元素
slice(start, [end])选取指定范围匹配的子集 •start 开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。 •end 结束选取自己的位置，如果不指定，则就是本身的结尾。
prev([expr]),取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll([expr]),查找当前元素之前所有的同辈元素
prevUntil([exp|ele][,fil]),查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
siblings([expr]),取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

<A>
  <B>
              <C></C>
              <D></D>
              <E></E>
              <F></F>
  </B>
</A>

B.children() 获得所有子元素（CDEF）

A.find(D) 从A子元素中查询D

D.parent() 获得D的父元素（B）

C.next() 下一个兄弟（D）

C.nextAll() 后面的所有兄弟（DEF）

E.prev() 上一个兄弟（D） –> previous()

E.prevAll() 前面的所有（CD）

E.siblings() 所有兄弟(CDF)

了解

C.nextUntil(E) C最后的所有兄弟，直到指定元素截止（DE）

F.prevUntil(D) （DE）

D.parents() 获得D所有父元素（B、A）

D.closest()获得D所有父元素,含自己（D、B、A）与 D.parents() 对比

closest和parents的主要区别是：

1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；

2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；

3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

1.3 串联

add(expr|ele|html|obj[,con]),把与表达式匹配的元素添加到jQuery对象中

A.add(B) 将A和B拼凑在一起，等效 $(A,B)

andSelf(),加入先前所选的加入当前元素中

A.children().andSelf() 所有孩子，再添加自己

contents(),查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 contents() 获得所有节点（子元素、文本） abc xxx
end() 回到最近的一个”破坏性”操作之前

end() 回到最近的一个”破坏性”操作之前

A.children().end()… end将返回开始A位置

2 事件

2.1 常见事件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02{
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }

    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#e01").blur(function(){
                $("#textMsg").html("文本框失去焦点：blur");
            }).focus(function(){
                $("#textMsg").html("文本框获得焦点：focus");
            }).keydown(function(){
                $("#textMsg").append("键盘按下：keydown");
            }).keypress(function(){
                $("#textMsg").append("键盘按住：keypress");
            }).keyup(function(){
                $("#textMsg").append("键盘弹起：keyup");
            }).select(function(event){
                //支持谷歌
                var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
                $("#textMsg").html("文本内容被选中：select ， " + sub);
            });

            var i = 0;
            $("#e02").mouseover(function(){
                $("#divMsg").html("鼠标移上：mouseover");
            }).mousemove(function(){
                $("#divMsg").html("鼠标移动：mousemove , " + i++ );
            }).mouseout(function(){
                $("#divMsg").html("鼠标移出：mouseout");
            }).mousedown(function(){
                $("#divMsg").html("鼠标按下：mousedown");
            }).mouseup(function(){
                $("#divMsg").html("鼠标弹起：mouseup");
            });

            $("#e03").click(function(){
                $("#buttonMsg").html("单击：click");
            }).dblclick(function(){
                $("#buttonMsg").html("双击：dblclick");
            });

        });

    </script>

</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span> <br/>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span> <br/>
    <hr/>
    <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>

focus和 focusin 对比 focus获得焦点 foucsin获得焦点。可以在父元素上检测子元素获取焦点的情况。
blur和 focusout 失去焦点[同理]
mouseover和 mouseenter 移进 mouseover, 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件
mouseout和 mouseleave 移出[同理]

2.2 页面载入【掌握】

方式1：

$(document).ready(function(){         // $ == jQuery
   ....
});

变种

jQuery(document).ready(function(){         // $ == jQuery
   ....
});

方式2：简化版

$(function(){
  .....
});

ready函数可以使用多次。而window.onload只能一次

2.3 事件处理和委派【掌握】

on(events,[selector],[data],fn)，在选择元素上绑定一个或多个事件的事件处理函数。
off(events,[selector],[fn])，在选择元素上移除一个或多个事件的事件处理函数。
bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。
unbind(type,[data|fn]])，bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
one(type,[data],fn)，为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 one 绑定一次事件

 绑定和解绑

在文档装载完成以后,如果打算为元素绑定事件来处理完成某些操作,则可以使用

bind()方法来对匹配元素进行特定的事件绑定,bind()方法的调用格式如下:

bind(type,[,data],fn);

第1个参数是事件类型,.当然也可以是自定义名称

第2个参数是可选参数,作为event.data属性值传递给事件对象的额外的数据对象

第3个参数则是用来绑定的处理函数

bind 绑定事件，一直使用，直到解绑。

   例如：$username.bind("click",function(){})   --> $username.click(function(){});

unbind 解绑事件

   绑定是可以指定别名 ，格式： 事件.别名

          bind("click.xxx",fn)

          unbind("click.xxx")

 触发（了解）

trigger(type,[data])，在每一个匹配的元素上触发某类事件。

triggerHandler(type, [data])，这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

   trigger()触发所有的事件（包括浏览器默认的）

   triggerHandler()触发所有的事件（不包括浏览器默认的）

事件冒泡

1.什么是冒泡

案例介绍

之所以称之为冒泡,是因为事件会按照DOM的层次结构像水泡一样不断向

上直至顶部.

2.事件冒泡引发的问题.

事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素

的click事件,然而

元素和元素的click事件也同时被触

发了.因此有必要对事件的作用范围进行限制.当单击元素时,只

触发元素的click事件,而不触发

和元素上的

click事件.当单击

元素时,只触发

元素上的click事件,

而不触发元素上的click事件.

为了尽快解决这些问题,我们我们先介绍以下内容:

。

事件对象:

  由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同

浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩

展和封装,从而使得在任何浏览器中能很好的轻松的访问获取事件对象以及事

件对象的一些属性在程序中使用事件对象非常简单,只需要为函数添加一个参

数.

//event:事件对象

$(“element”).bind(“click”,function(event){

//coding…

})

这样,当单击”element”时,事件对象就被创建了,这个事件对象只有事件处理函数才能访问到.事件处理函数在执行完毕后,事件对象就会被销毁.

停止事件冒泡

停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行.在jquery中提供了stopPropagation()方法来阻止冒泡事件.

$(“span”).bind(“click”,function(){

vartxt=$("#msg").html();+"<p>内是span元素被单击</p>";

$(“#msg”).html(txt);

event.stopPropagation();//停止冒泡事件

})

当单击span元素时,只会触发span元素上的click事件,而不会触发

div元素和body元素的click事件.

可以用同样的方法解决

元素上的问题

阻止默认行为

网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为

在jquery中,提供了preventDefault()方法来阻止元素的默认行为.

举一个例子,在项目中,经常需要验证表单,在单击”提交”按钮是,验证表单内容,例如元素是否是必填字段,某元素长度是否够6位,单表单不符合提交条件时,要阻止表单的提交

eg:

$(“#sub”).bind(“click”,function(event){

 var username = $("#username").val();  //获取元素的值

 if(username==""){     //判断值是否为空

$("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息

event.preventDefault();  //阻止默认行为 ( 表单提交 )

} })

事件对象的属性

(1) event.type()方法

该方法的作用是可以获取到事件的类型

$(“a”).click(function(event){

alert(event.type); //获取事件类型

return false;  //阻止链接被跳转

})

以上代码会返回”click”

(2)event.preventDefault()方法

阻止默认事件行为.js中符合W3C规范的preventDefault()方法在IE浏览器中无效.

jquery对其进行了封装,使之能兼容各大浏览器

(3)event.stopPropagation()方法

阻止事件的冒泡.js真符合W3C规范的stopPropagation()方法在IE浏览器中无效.jquery

对其进行了封装,使之能兼容各大浏览器

(4) event.target()方法

event.target()方法的作用是获取到触发事件的元素.jquery对其封装后，避免了

W3C,IE和 Safari浏览器不同标准的差异

$(“a[href=’http://www.google.com‘]”).click(function(event){

    alert(event.target.href); //获取触发事件的a元素的href属性值

    return false;//阻止链接跳转

});//output “http://google.com”

(5)event.relateTarget()方法.

在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法

来访问.相关元素是通过event.relateTarget()方法来访问的.event.relatedTarget()

方法是在mouseover中相当于 IE浏览器的event.fromElement()方法,在mouse

中相当于IE浏览器的event.toElement方法. jquery对其进行了封装,使之能兼容各大浏览器

(6)event.pageX和event.pageY.

该方法的作用是获取到光标相对于页面的x坐标和y坐标.如果没有使用jquery时,那么IE浏览器中

是使用event.pageX()和event.pageY()方法.如果页面上有滚动条,则还要加上滚动条的宽度和高

度.在IE浏览器中还应该减去默认的2px的边框.

$(“a”).click(function(){

//获取鼠标相对于当前页面的坐标

alert("Current mouse position:"+event.pageX+","+event.pageY);   

  return false;//阻止链接跳转

});

(7)event.which()方法

 该方法的作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘的按键.

$(function(){

$(“body”).mousedown(function(e){

alert(e.which); //1==鼠标左键 left 2==鼠标中键 3=鼠标右键

});});

(8)event.originaIEvent()方法. 该方法的作用是指向原始的事件对象

 委派

live(type, [data], fn)，给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

A标签添加事件，之后再追加a标签都具有相同的事件。

die(type, [fn])，从元素中删除先前用.live()绑定的所有事件

die解绑

2.4 事件切换【了解】

hover([over,]out) 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数

toggle(fn,fn2,[fn3,fn4,…])用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

hover 在mouseover和mouseout之间进行切换

toggle 点击事件切换，点击第一次执行 fn，点击第二次执行fn2…..

    <script type="text/javascript">
        $(function(){
            //1 点击事件切换
            $("#e01").toggle(function(){
                alert("第一次");
            } ,function(){
                alert("第二次");
            });
            //2. 鼠标移进出切换
            /*
            $("#e02").hover(function(){
                //over
                $("#divMsg").html("over");
            },function(){
                //out
                $("#divMsg").html("out");
            });
            */
            $("#e02").mouseover(function(){
                $("#divMsg").html("over");
            }).mouseout(function(){
                $("#divMsg").html("out");
            });

        });
    </script>

案例文字提示

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<script type="text/javascript">
    $(function(){
        //将默认提示去掉，改成自定义提示

        $(".tooltip").mouseover(function(event){
            if($(this).attr("title")){
                //1获得title并记录
                $(this).data("title",$(this).attr("title"));

                //2 删除title提示
                $(this).removeAttr("title");
            }

            //3 显示自定义提示
            var divObj = $("<div id='tooltip'>"+$(this).data("title")+"</div>");
            $("body").append(divObj);
            //显示,确定显示位置
            divObj.css({"left":event.pageX + 20 + "px" , "top" : event.pageY + 10 + "px"}).show(1000);
        }).mouseout(function(){
            $("#tooltip").remove();
        }).mousemove(function(){
            $("#tooltip").css({"left":event.pageX + 20 + "px" , "top" : event.pageY + 10 + "px"});
        });

    });

</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
</body>
</html>

案例图片放大提示

<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
</style>
<script type="text/javascript">
    $(function(){
        var x = 10;
        var y = 20;
        var href;

        $("a[class=tooltip]").mouseover(function(e){
            //1 获取对应标签的自带提示
            //var title = $("a[class=tooltip]").attr("title");
            //this代表的是DOM对象(页面中的元素)
            href = this.href;

            //删除自带提示
            this.href = "";

            //2 创建标签用于自定义提示
            var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>");

            //3 将自定义提示的标签，添加到body标签下
            $("body").append($div);

            //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            }).show(1000);

        }).mouseout(function(){
            this.href = href;
            $("#tooltip").remove();
        }).mousemove(function(e){
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            });
        });
    });
</script>

</head>
<body>
<h3>有效果：</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>无效果：</h3>
<ul>
        <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>
</body>
</html>

3 效果【了解】

show([speed,[easing],[fn]])，显示隐藏的匹配元素。 •三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值
hide([speed,[easing],[fn]])，隐藏显示的元素
toggle([speed],[easing],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 •speed: 隐藏/显示效果的速度。默认是 “0”毫秒。可能的值：slow，normal，fast。” •easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear” •fn:在动画完成时执行的函数，每个元素执行一次

 基本：改变高和宽

   show(速度，fn) 显示

          当显示成功后触发fn

   hide()隐藏

   toggle(speed[,fn]) 切换,如果隐藏就显示，如果显示就隐藏。

—————————————-

slideDown([speed],[easing],[fn])，通过高度变化（向下增大）来动态地显示所有匹配的元素

slideUp([speed,[easing],[fn]])，通过高度变化（向上减小）来动态地隐藏所有匹配的元素

slideToggle([speed],[easing],[fn]) 通过高度变化来切换所有匹配元素的可见性

   •这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示

 滑动：改变高度

   slideDown，显示（从上往下）

   slideUp，隐藏（从下往上）

   slideToggle()切换

———————————————————-

fadeIn([speed],[easing],[fn])，通过不透明度的变化来实现所有匹配元素的淡入效果

   •speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000)

   •easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

   •fn:在动画完成时执行的函数，每个元素执行一次。

fadeOut([speed],[easing],[fn])，通过不透明度的变化来实现所有匹配元素的淡出效果

fadeTo([[speed],opacity,[easing],[fn]])

   •speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000)

   •opacity:一个0至1之间表示透明度的数字。

   •easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

   •fn:在动画完成时执行的函数，每个元素执行一次。

fadeToggle([speed,[easing],[fn]])，通过不透明度的变化来开关所有匹配元素的淡入和淡出效果

 淡入淡出：改变透明度

   fadeIn显示

   fadeOut  隐藏

   fadeToggle切换

   fadeTo指定对象透明度

案例抽奖信息显示

    <script type="text/javascript">
        $(document).ready(function(){
            //1 创建5区域
            for(var i = 0 ; i < 5 ; i++){
                createDiv();
            }
            //2 定时器
            setInterval("showDiv()",1000);

        });

        // 显示div
        function showDiv(){
            //2 第一次隐藏
            $("div").first().slideUp("1000",function(){
                //将当前对象追加到最后
                $(this).appendTo($("body")).fadeIn("1000");
            });
        }

        var num = 1;
        //创建div
        function createDiv(){
            var divObj = $("<div></div>");
            divObj.html(num++);
            divObj.css({
                "border": "1px solid #000",
                "height": "50px",
                "width": "500px",
                "margin":"5px",
                "font-size":"30px"
            });
            $("body").append(divObj);
        }

    </script>
</head>
<body>      
</body>
</html>

动态加载内容(缺ajax填充数据)

    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">

        $(function(){
            //1 创建5区域
            for(var i = 0 ; i < 10 ; i++){
                createDiv();
            }

            //2 窗口滚动事件
            $(window).scroll(function(){
                // 1 显示区域高度
                var windowHeight = $(this).height();
                // 2 滚动位置
                var top = $(this).scrollTop();
                // 3 文档高度
                var documentHeight = $(document).height();

                // 1 + 2 接近 3 时 添加
                if(windowHeight + top + 100 > documentHeight){
                    createDiv();
                    //发送ajax填充div内容
                }
                //$("#showMsg").html(height + " - " + top + " - " + h);
            });

        });

        var num = 1;
        //创建div
        function createDiv(){
            var divObj = $("<div></div>");
            divObj.html(num++);
            divObj.css({
                "border": "1px solid #000",
                "height": "100px",
                "width": "500px",
                "margin":"5px",
                "font-size":"30px"
            });
            $("body").append(divObj);
        }
    </script>

    <style type="text/css">
        #showMsg{
              position: fixed;
              border: 1px solid #000;
              width: 300px;
              height: 30px;
              left: 600px;
              bottom: 0px;
        }
    </style>
</head>

<body>
    <div id="showMsg"></div>
</body>
</html>

4 Ajax【掌握】

第一层，最原始层，$.ajax,一般不使用，完成更强大功能时需要使用。例如：如果出错了，给出提示。

第二层，load、.get、.get、.get 、.post 开发中常使用用于处理ajax

第三层，.getJSON.getJSON.getJSON .getScript 优化辅助

4.1 load函数

必须在jQuery对象上触发函数，发送ajax请求

load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中

   •url:待装入 HTML 网页网址。

   •data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

   •callback:载入成功时回调函数。函数有三个参数:

   •data:返回内容

   •textStatus: 代表请求状态的

   •其值可能为: succuss, error, notmodify,timeout 4 种)

   •XMLHttpRequest 对象

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式

可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码

4.2 $.get

 发送的就是get请求

jQuery.get(url, [data], [callback],[type]) 通过远程 HTTP GET 请求载入信息。

   •url:待载入页面的URL地址

   •data:待发送 Key/value 参数。

   •callback:载入成功时回调函数。

   •type:返回内容格式，xml, html, script, json, text, _default。

jQuery.getScript(url, [callback]),通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

   •页面初次加载时不需要加载全部的javascript文件，在需要时动态加载

jQuery.getJSON(url, [data], [callback]) 通过 HTTP GET 请求载入 JSON 数据。

4.3 $.post

 发送post请求

jQuery.post(url, [data], [callback],[type]),通过远程 HTTP POST请求载入信息。

   •url:发送请求地址。

   •data:待发送 Key/value 参数。

   •callback:发送成功时回调函数。

   •type:返回内容格式，xml, html, script, json, text, _default。

4.4 $.ajax

 底层原始ajax请求方式

 格式1：jQuery.ajax(url,[settings])

 格式2：jQuery.ajax(settings); 使用json格式设置多项数据

                //4 $.ajax
                // * async 设置是否异步，true：表示异步（ajax）
                // * type 设置请求方式。例如：get、post
                // * url 设置请求路径
                // * data 请求参数
                // * dataType 设置数据转换类型，例如：xml, html, script, json
                // * success  成功回调
                // * error 错误回调
                $.ajax({
                    "async":true,
                    "type":"POST",
                    "url":url,
                    "data":params,
                    "success":function(data){
                        alert(data);
                    },
                    "error" : function(){
                        alert("错误");
                    }
                });

4.5 表单序列化

在客户端与服务器端进行通信时，常常需要将客户端浏览器中的内容发送至服务器端进行处理。

如果需要发送的内容较少时，处理比较方便。但在真实项目中，往往需要处理的数据内容很复杂。

jQuery提供了相应的方法帮助开发者解决这个问题。

serialize()方法

   •该方法作用于一个jQuery对象，可以将DOM元素内容序列化为字符串。方便客户端发送请求。



   所有内容：有name，有值（非空）--文本有数据，单选多选选中，下拉列表选中等

   字符串：key=value&key=value&....

   应用场景：$.get

serializeArray()方法

   •该方法作用于一个jQuery对象，可以将DOM元素内容序列化为JSON数据格式。

   •注：此方法返回的是JSON对象而非JSON字符串。

serializeArray()将表单中所有内容转成json数组

5 Javascript跨域

域名：（英语：Domain Name），又称网域、网域名称，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

域：服务器域名，唯一标识（协议、域名、端口）必须保证一直，说明域相同。

跨域：两个不同域名之间的通信，称之为跨域。例如：http://www.baidu.com和http://www.sina.com.cn。

跨域：在一个服务器上，去访问另一个服务器

jQuery如何实现跨域请求？使用JSONP形式实现跨域。

javascript如果调用另一个域程序，不能执行当前域js函数。

什么是JSONP

   •JSONP（JSON with Padding）是数据交换格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。

   •由于同源策略，一般来说位于 server.example.com 的网页无法与不是 server.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。

js方式

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //编码
        response.setContentType("application/json;charset=UTF-8");

        //1 获得请求方式
        String method = request.getMethod();
        System.out.println("请求方式： " + method);

        //2 获得请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //3 服务器返回数据--json  (框架：jsonlib  fastjson flex 等)
        String jsonStr = "{\"success\":\"用户操作成功\",\"info\":\"提示信息\"}";
        //String jsonStr = "{'success':'用户操作成功','info':'提示信息'}";  //非法格式
        response.getWriter().print(jsonStr);

    }

    <script type="text/javascript">
        function showData(data){
            alert(data.success);    
        }
    </script>
    <script type="text/javascript" src="http://localhost/web/getData?callback=showData"></script>
</head>
<body>  
    <input type="button" value="发送ajax" />
</body>

jQuery方式

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //编码
        response.setContentType("application/json;charset=UTF-8");

        //1 获得请求方式
        String method = request.getMethod();
        System.out.println("请求方式： " + method);

        //2 获得请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //3 服务器返回数据--json  (框架：jsonlib  fastjson flex 等)
        String jsonStr = "{\"success\":\"用户操作成功\",\"info\":\"提示信息\"}";
        //String jsonStr = "{'success':'用户操作成功','info':'提示信息'}";  //非法格式
        response.getWriter().print(jsonStr);

    }

    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $.getJSON("http://localhost/web/getData?callback=?",function(data){
            alert(data.success)
        }); 
    </script>   
</head>
<body>  
    <input type="button" value="发送ajax" />  
</body>

6 表单验证插件Validation

1.引入插件文件 2.在页面加载完毕之后,执行一段语句$(“#commentForm”).validate(); 3.在需要验证的组件中增加class=”” 必填: required email url

匿名自调

(function(){ alert("TTTT"); })(); //( )();

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018年08月22日，如有侵权请联系 cloudcommunity@tencent.com 删除

java

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

java