jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

飞向三十岁

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量114

点赞数

分类专栏： JavaWeb 文章标签： jQuery

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

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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")
});

飞向三十岁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery标签（空格分隔）：jQuery 特点快速获取文档元素提供漂亮的页面动态效果创建AJAX无刷新网页jQuery 选择器*$("*")所有元素#id$("#lastname")id=“lastname” 的元素:first$(“p:first”)第一个元素:last$(“p:last”)最后一个元素:input...
复制链接

扫一扫