jQuery-CSDN博客

本文链接：https://blog.csdn.net/weixin_43999652/article/details/101306384

jQuery

标签（空格分隔）：

jQuery 特点

快速获取文档元素
提供漂亮的页面动态效果
创建AJAX无刷新网页

jQuery 选择器

*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
:first	$(“p:first”)	第一个元素
:last	$(“p:last”)	最后一个元素
:input	$(":input")	所有元素
:text	$(":text")	所有 type=“text” 的元素

    <form>
        <input type="text" name="1" id="" value="1">
        <input type="password" name="2" id="" value="2">
        <input type="text" name="3" id="" value="3">
        <input type="submit" name="4" id="" value="4">
    </form>
    <script>
        var $title = $("#title");
        //console.log($title);
        var $lis = $("ul>li");
        //console.log($lis);
        //console.log($lis.first());
        $lis.each(function(index,element){
            //console.log(element.innerHTML);

        });
        var $inputs =$(":input");
        $inputs.each(function(index,element){
            console.log(element.type);
        });
        var $input4 = $(":input[name=4]");
        //console.log($input4);
    </script>

事件

在这里插入图片描述

live事件
jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

轮播代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播效果</title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<style>
			*{
				margin: 0 auto;
				padding: 0;
			}
			#father{
				width: 320px;
				height: 180px;
				overflow: hidden;
				position: relative;
			}
			#ul1{
				width: 1280px;
				height: 180px;
				position: absolute;
				top: 0;
				left: 0;
			}
			#ul1>li{
				width: 320px;
				height: 180px;
				float: left;
			}
			#ul2{
				width: 108px;
				height: 36px;
				position: absolute;
				bottom: 5px;
				right: 5px;
			}
			#ul2>li{
				width: 26px;
				height: 26px;
				margin: 5px;
				float: left;
				line-height: 26px;
				font-size: 18px;
				color: white;
				text-align: center;
				cursor: pointer;
				border-radius: 50%;
				background-color: rgba(0,0,0,0.6);
			}
			#son1{
				width: 26px;
				height: 26px;
				position: absolute;
				top: 77px;
				left: 0;
				background-color: rgba(0,0,0,0.5);
				line-height: 26px;
				font-size: 15px;
				color: white;
				text-align: center;
				cursor: pointer;
			}
			#son2{
				cursor: pointer;
				width: 26px;
				height: 26px;
				position: absolute;
				top: 77px;
				right: 0;
				background-color: rgba(0,0,0,0.5);
				line-height: 26px;
				font-size: 15px;
				color: white;
				text-align: center;
			}
			li{
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<ul id="ul1">
				<!--最后多出第一张图片-->
				<li><img src="1.jpg" width="320" height="180" /></li>
				<li><img src="2.jpg" width="320" height="180" /></li>
				<li><img src="3.jpg" width="320" height="180" /></li>
				<li><img src="1.jpg" width="320" height="180" /></li>
			</ul>
			<ul id="ul2">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<div id="son1">&lt;</div>
			<div id="son2">&gt;</div>
		</div>
		<script>
            var isAnimate = false;
            var playTime = null;
            var points = [0,-320,-640,-960];
            father.onmouseover = stop;
            father.onmouseout = play;
            $("#son1").click(function(){
                if(!isAnimate){
                    isAnimate=true;
                    var leftPont = parseInt($("#ul1").css("left"));
                    if(leftPont==0)
                        $("#ul1").css("left","-960px");
                    $("#ul1").animate({"left":parseInt($("#ul1").css("left"))+320+"px"},1000,function(){
                        isAnimate = false;
                    })
                }
            });
            $("#son2").click(function(){
                myAnimate();
            });
            function myAnimate(toPoint){
                if(!isAnimate){
                    isAnimate=true;
                    if(parseInt($("#ul1").css('left'))-320<-960)
                        $("#ul1").css("left","0");
                    if(toPoint==null)
                        toPoint=parseInt($("#ul1").css("left"))-320;
                    $("#ul1").animate({'left':toPoint+'px'},1500,function(){isAnimate=false;});  
                }
            }
            $("#ul2>li").each(function(index,element){
                $(element).click(function(){
                    myAnimate(points[index])
                });
            });
            function play(){
                playTime = setInterval(function(){
                    myAnimate();
                }),2000
            }
            function stop(){
                if(playTime!=null){
                    clearInterval(playTime);
                }
            }
			play();
		</script>
	</body>
<html>

ajax

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

返回值:XMLHttpRequestjQuery.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
返回值:XMLHttpRequestjQuery.post(url, [data], [callback], [type]) 同上

$("#out").click(function(){
	$.post("/web05/seletLikeCommodityServlet?c_name="+$("#in").val(), function(data){
		//console.log(data);
		for(var i=0;i<data.length;i++){
			$("div:first").append($("<p>").html(data[i].c_name));
		}
	}, "json")
});