java前端技术---jquery基础详解

最新推荐文章于 2023-11-16 22:17:17 发布
最新推荐文章于 2023-11-16 22:17:17 发布
阅读量615 收藏 2
点赞数
分类专栏： 前端web 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33223299/article/details/77799989
版权

一.jquery简介

  jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互
 jQuery 的功能概括
1、html 的元素选取
2、html的元素操作
3、html dom遍历和修改
4、js特效和动画效果
5、css操作
6、html事件操作
7、ajax异步请求方式

二.jquery的安装

第一种:
从官网下载jquery插件,然后导入到工程文件里,然后在页面中引入 
<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>

第二种
可以直接从网上引入
比如从百度cdn引入 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"/>

三.jquery语法

1.jquery对象:通过jQuery包装DOM对象后产生的对象。
  比如:$(“#test”).html()就相当于document.getElementById("test").innerHTML;
比较之后,你会发现jquery简化了好多
注意:虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象

dom对象===>jquery对象 

<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>
<body>
<input type="text" id="demo" value="你好"/>
<script type="text/javascript">
var a=document.getElementById("demo");
alert(a.value);//dom直接获取id,输出你好
var $a=$("#demo");
alert($a.val());//jquery获取id输出你好
var $b=$(a);
alert($b.val())//将已经获取id的dom对象转化为jquery对象,输出你好
</script>
</body>
这里补充一点,获取id,还有一种方法,本人测验有效,直接 var  $a=$(demo);
总结:对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 

jquery对象===>dom对象 

<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>
<body>
<input type="text" id="demo" value="你好"/>
<script type="text/javascript">
var $a=$(demo);
alert($a.val());//jquery对象

var b=$a[0];
alert(b.value);//方法一.通过$对象[index]

var c=$a.get(0);
alert(c.value);//方法二.通过$对象.get(index)
</script>
</body>

四.jquery选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器,关于选择器的详细介绍可以参考另一篇博客,jquery选择器详解

1.元素选择器
$("元素") 
<script type="text/javascript">
$(function (){
$("button").click(function(){
	$("p").hide();
})
})
</script>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>

写jquery的一些语法一定不要跟dom操作的语法混一起,否则要报错.比如 dom点击操作是 .οnclick=function(){
} 而jquery是.click(function(){ }),所以平时要多注意这些区别

2.id选择器
$("#id")
这个就不用举例子了,参考上面

3.类选择器
class          用法: $(”.myClass”)      返回值  集合元素
  说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

4.全选择器
*        用法: $(”*”)      返回值  集合元素
 说明: 匹配所有元素,多用于结合上下文来搜索

5.条件匹配
  selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)    返回值  集合元素
 说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
       p class=”myClass”
语法 描述 实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

五.jquery事件

常用的 jQuery 事件方法

1.文档就绪事件 
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
简化后 
$(function(){
 
   // 开始写 jQuery 代码...
 
});

2.单击事件
click() 
click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。
例如:点击p元素 
$("p").click(function(){
}
);

3.双击事件
dblclick() 
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

4.mouseenter() 
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
<script>
$(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>
5.mouseleave()
顾名思义:鼠标离开触发的事件

6.mousedown()
鼠标移动在元素上并按下左键弹出的内容 
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

7.mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。


8.hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 
<script>
$(document).ready(function(){
    $("#p1").hover(
		function(){
			alert("你进入了 p1!");
		},
		function(){
			alert("拜拜! 现在你离开了 p1!");
		}
    )
});
</script>

9.focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

10.blur()
当元素离开焦点时,发生blur()事件 
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>

六.jquery效果

6.1.隐藏与显示 
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();//可以设置时间,速度的快慢,slow.normal,fast.毫秒数
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>

想要更多具体的效果可以参考我上传的 jquery使用文档,有需要的时候可以查找,这里只是梳理下基础的常见的用法

可以将两个按钮合二为一,使用一个按钮就可以,可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

6.2.淡入与淡出
通过 jQuery，您可以实现元素的淡入淡出效果。 
jQuery 拥有下面四种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo()

1.jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
后面可以设置速度快慢 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
	</script>
2.jQuery fadeOut() 方法用于淡出可见元素。
3.jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

4.jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>

6.3.jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
  • slideDown()
向下滑动 
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>








 
 
 
 
  • slideUp()
 
 
 
  向上滑动 
 
 
 
 
  
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
 
 
 
 
 
  • slideToggle()
 
 
 
  在slideDown() 与 slideUp() 方法之间进行切换。 
 
 

 

 
 
  

 

 
 6.4.动画 

 

 
 
 
  jQuery 动画 - animate() 方法 
 
 
 
 
  jQuery animate() 方法用于创建自定义动画。 
 
 

 

 
 
 
  $(selector).animate({params},speed,callback); 
 
 
 
 
  
  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。
 
 
 
 
 
  下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 600像素 
 
 

 

 
 
<script>
$(function(){
	$("button").click(function(){
		$("div").animate({left:'600px'});
	})
})
</script>
 
 
 
  
  
 
 
 -aminate()操作多个属性
  
 
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
 
 
 

 

 
 - 使用相对值 

 

 
 
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
 
 
 
 

   -使用预定义的值 
 
 
 

   您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： 
 
 
 
 
  
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
 
  
 
   
 
  
 -使用队列功能 
  
 
  
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
 
  
 -停止动画jQuery stop() 方法 
 
 
 

   jQuery stop() 方法用于停止动画或效果，在它们完成之前。 
 
 
 

   stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 
 
 
 
 
  
 
 
 
 
6.5.jQuery Callback 方法
 
 
 
  Callback 函数在当前动画 100% 完成之后执行。 
 
 
 
 
   
  
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});
 
  
 
  
六.jQuery 方法链接
 
 
 
 
 
  
 
   直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。 
  
 
  
 
   不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。 
  
 
  
 
   提示： 这样的话，浏览器就不必多次查找相同的元素。 
  
 
 
 
 
 
   
  
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
 
  
 
  
 
 
 
 
七.jQuery HTML
 
 

 

 
 
 

 

 
 7.1.jquery 捕获 

 

 
 
 
  --获得内容 - text()、html() 以及 val() 
 
 
 
 
  三个简单实用的用于 DOM 操作的 jQuery 方法： 
 
 
 
 
  text() - 设置或返回所选元素的文本内容 
 
 
 
 
  html() - 设置或返回所选元素的内容（包括 HTML 标记） 
 
 
 
 
  val() - 设置或返回表单字段的值 
 
 

 

 
 
<script>
$(function(){
	$("#but1").click(function(){
		alert($('#demo').text());
	})
	$("#but2").click(function(){
		alert($('#demo').html());
	})
	alert($('input').val())
})
</script>
</head>
<body>
<p id="demo">大家<b>好</b></p>
<button id="but1">获取文本</button>
<button id="but2">获取html</button>
<input type="text" id="input" value="你好"/>
 
 
 
 --获取属性 - attr() 

 

 
  
 
$("button").click(function(){
  alert($("#runoob").attr("href"));
});
 
 
 
 7.2.jquery设置 

 

 
 
  

 

 
 
 
  设置内容 - text()、html() 以及 val() 
 
 
 
 
  我们将使用前一章中的三个相同的方法来设置内容： 
 
 
 
 
  text() - 设置或返回所选元素的文本内容 
 
 
 
 
  html() - 设置或返回所选元素的内容（包括 HTML 标记） 
 
 
 
 
  val() - 设置或返回表单字段的值 
 
 

 

 
 
  

 

 
 第一种.括号里写你想要的值 

 

 
 
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
 

 

 
 
  

 

 
 第二种.括号里写回调函数 

 

 
 
$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});
 
 
 设置属性 

 

 
 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
	// 通过修改的 title 值来修改链接名称
	title =  $("#runoob").attr('title');
	$("#runoob").html(title);
  });
});
</script>
</head>

<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
 
 
 
  

 

 
 
 
  attr() 的回调函数 
 
 
 
 
  jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 
 
 
 
 
  下面的例子演示带有回调函数的 attr() 方法： 
 
 

 

 
  
 
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});
 
 
 7.3.jquery添加元素 

 

 
 

   添加新的 HTML 内容 
 
 
 

   我们将学习用于添加新内容的四个 jQuery 方法： 
 
 
 
 
  
  • append() - 在被选元素的结尾插入内容
 
  
 
   
$("p").append("追加文本");
 
  
 
  
  • prepend() - 在被选元素的开头插入内容
 
  
 
   
$("p").prepend("在开头追加文本");
 
  
 
  
  • after() - 在被选元素之后插入内容
 
  
  • before() - 在被选元素之前插入内容
 
  
 
   
$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");
 
   区别: 
  
 
  
 
   append/prepend 是在选择元素内部嵌入。 
   
 
    after/before 是在元素外面追加。 
   
 
   
 
  
 
 
 

 

 
 7.4.jquery删除元素 

 

 
  
 

   如需删除元素和内容，一般可使用以下两个 jQuery 方法： 
 
 
 
 
  remove() - 删除被选元素（及其子元素） 
 
 
 
 
  
$("#div1").remove();
 
 
 
 
 
  jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。 
 
 
 
 
  
$("p").remove(".italic");//删除所有class为italic的p元素
 
 
 
 
 
  empty() - 从被选元素中删除子元素 
 
 

 

 
 
$("#div1").empty();
 
 
  

 

7.5.jquery  css
 

 
 
 
  jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： 
 
 
 
 
  css样式: 
 
 
 
 
  
.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}
 
 
 
 
 
  
  • addClass() - 向被选元素添加一个或多个类
 
  
 
   
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
 
   
$("button").click(function(){
  $("body div:first").addClass("important blue");
});




 
  
 
  
  • removeClass() - 从被选元素删除一个或多个类
 
  
 
   
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
 
  
 
  
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
 
  
 
   
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
 
  
 
  
  • css() - 设置或返回样式属性
 
 
 
 
 
  
 
   返回 CSS 属性 
  
 
  
 
   如需返回指定的 CSS 属性的值，请使用如下语法： 
  
 
  
 
   css("propertyname"); 
  
 
 
 
 
 
  
$("p").css("background-color");//返回css背景颜色属性
 
  
$("p").css({"background-color":"yellow","font-size":"200%"});//设置css背景颜色为黄色,字体大小为200%
 
  
 
   
  
  
 
  
7.6.jquery尺寸
 
  
 
   jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法：  
  
 
  
 
   width()  height()    不包括内边距与边框与外边距 
  
 
  
 
   
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
 
   
    txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
 
   
   txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
   txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
 
   
  
  
 
  
 
   innerWidth()  innerHeight()  包括内边距 
  
 
  
 
   
  
  
 
  
 
   outerWidth()  outerHeight()  包括内边距与边框 
  
 
  
 
   
 
  
 
  
八.jquery 遍历
 
  
 
   Query 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。 
  
 
  
 
   祖先 
  
 
  
 
   8.1  jQuery parent() 方法  
  
 
  
 
   parent() 方法返回被选元素的直接父元素。  
  
 
  
 
   该方法只会向上一级对 DOM 树进行遍历。 
  
 
  
$(document).ready(function(){
  $("span").parent();//返回的是span元素的直接父元素
});
 
  
 
   
 
  
 
  8.2  jQuery parents() 方法 
  
 
   parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。 
  
 
  
 
   
$(document).ready(function(){
  $("span").parents();//返回的是span元素的所有父元素
});
 
   
$(document).ready(function(){
  $("span").parents("ul");//返回的是span元素的所有父元素并且它是ul元素
});
 
   
 
   8.3 jQuery parentsUntil() 方法 
   

     parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 
   
 
   
 
    
$(document).ready(function(){
  $("span").parentsUntil("div");//span元素与div元素之间的元素,不包括span与div
});
 
    
 
    后代 
   
 
   8.4 jQuery children() 方法 
  
 
  
 
   children() 方法返回被选元素的所有直接子元素。 
  
 
  
 
   该方法只会向下一级对 DOM 树进行遍历。 
  
 
  
 
    
   
$(document).ready(function(){
  $("div").children();//直接子元素
});
 
   
 8.5 jQuery find() 方法 
  
 
  
 
   find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。 
  
 
  
 
   下面的例子返回属于 <div> 后代的所有 <span> 元素： 
  
 
  
 
   
$(document).ready(function(){
  $("div").find("span");
});
 
   
 
    
  
   
 
   同胞 
   
 
   
 
  
 
  
 
   在 DOM 树中水平遍历 
  
 
  
 
   有许多有用的方法让我们在 DOM 树进行水平遍历： 
  
 
  
 
   
  • siblings()
 
   
 
     
    

      jQuery siblings() 方法 
    
 
    

      siblings() 方法返回被选元素的所有同胞元素。 
    
 
   
 
   
 
     
    
$(document).ready(function(){
  $("h2").siblings();//括号里可以写值,
});
 
   
 
   
  • next()
 
   
 
     
    

      jQuery next() 方法 
    
 
    

      next() 方法返回被选元素的下一个同胞元素。 
    
 
    

      该方法只返回一个元素。 
    
 
    
 
     
$(document).ready(function(){
  $("h2").next();
});
 
    
 
   
 
   
  • nextAll()
 
   
 
     
    

      jQuery nextAll() 方法 
    
 
    

      nextAll() 方法返回被选元素的所有跟随的同胞元素。 
    
 
    

      下面的例子返回 <h2> 的所有跟随的同胞元素： 
    
 
    
 
     
$(document).ready(function(){
  $("h2").nextAll();
});
 
    
 
   
 
   
  • nextUntil()
 
   
 
     
    

      jQuery nextUntil() 方法 
    
 
    

      nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 
    
 
    

      下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素： 
    
 
    
 
     
$(document).ready(function(){
  $("h2").nextUntil("h6");
});
 
    
 
   
 
   
  • prev()
  • prevAll()
  • prevUntil()
 
  
 
  
 
   这三个跟上面三个一样的用法,只是一个之后一个之前. 
  
 
  
 
   
  
  
 
  
 
   过滤 
  
 
  
 
   
  
  
 
  
 
   
 
    1.jQuery first() 方法 
   
 
   
 
    first() 方法返回被选元素的首个元素。 
   
 
  
 
  
 
 
 

 

 
 
 

 

 
 2.jQuery last() 方法 

 

 
 last() 方法返回被选元素的最后一个元素 

 

 
 
  

 

 
 3.Query eq() 方法 

 

 
 eq() 方法返回被选元素中带有指定索引号的元素。 

 

 
 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。 

 

 
 
  

 

 
 4.jQuery filter() 方法 

 

 
 filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 

 

 
 
$(document).ready(function(){
  $("p").filter(".url");//返回带有类名url的所有p元素
});
 
 
 
  
 
   
  
  
 
  
 
   5.jQuery not() 方法 
  
 
  
 
   not() 方法返回不匹配标准的所有元素。 
  
 
  
 
   提示：not() 方法与 filter() 相反。 
  
 
 
 
 
  
 
九.jquery  ajax
 

 

 
 
 
  AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 
 
 
 
 
  简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。 
 
 
 
 
  使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人 
  
$("button").click(function(){   $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){     if(statusTxt=="success")       alert("外部内容加载成功!");     if(statusTxt=="error")       alert("Error: "+xhr.status+": "+xhr.statusText);   }); });
 
  
 网等等。 
 
 
 
 
  
  
 
 
 
 
  9.1 jQuery load() 方法 
 
 

 

 
 
 
  jQuery load() 方法是简单但强大的 AJAX 方法。 
 
 
 
 
  load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 
 
 
 
 
  语法: 
 
 
 
 
  $(selector).load(URL,data,callback); 
 
 
 
 
  
 
   
  1. 必需的 URL 参数规定您希望加载的 URL。
  2. 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
  3. 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
 
  
 
 
 
 
 
  
 
    可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数： 
  
 
  
 
   
  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象
 
   
 
    
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
 
    
 9.2 jQuery - AJAX get() 和 post() 方法 
   
 
   
 
    jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。  
   
 
   
 
    
Query $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
 
    
  
    
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});
 
    
 jQuery $.post() 方法 $.post() 方法通过 HTTP POST 请求从服务器上请求数据。 语法: $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 data 参数规定连同请求发送的数据。 可选的 callback 参数是请求成功后所执行的函数名。 下面的例子使用 $.post() 连同请求一起发送数据： 
   
 
   
 
    
  
   
 
   
 
    
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});
 
    
 
    
 
   
 
   
 
    
 
   
 
   
 
    
 
   
 
  
 
 
 


                

        

        

    




    

      

        

            

              
                
                  good well
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Java整合JQueryEasyUI详解

				
			

			

				

					06-20
				

			

		

		

			
				
这是一套技术比较全面的EasyUI视频,由浅入深的几乎涵盖了所有EasyUI常用的组件,本课程后台Java端采用的是传统JDBC的技术,因为这套课程主要突出的是EasyUI的使用,所有后台这块技术大家可以忽略,只要有Java框架基础的...

			
		

	



                

              
                



	

		

			

				
					
高级java笔试题-FE_ROAD:现代前端基础知识点学习、进阶

				
			

			

				

					06-03
				

			

		

		

			
				
高级java笔试题 JS基础及进阶 至少完整读一遍，第一遍至少用一个月、最好三遍，。每一遍都会有不同的收获，对每一章内容尝试画出思维导图。 《你不知道JavaScript》系列 、 对JS基础讲的很棒 谷歌官方Web相关精品...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery

				
			

			

				

					xglfire的博客
				

				

					06-27
					
					225
					
				

			

		

		

			
				
jQuery



			
		

	





	

		

			

				
					
【Java 进阶篇】JQuery 案例：全选全不选，为选择添彩

				
			

			

				

					繁依Fanyi的博客
				

				

					11-14
					
					351
					
				

			

		

		

			
				
在网页开发中，表格是一种常见的数据展示方式，而提供全选和全不选的功能，不仅可以提高用户体验，还可以简化用户操作，使页面更加友好。通过 JQuery，我们可以轻松实现这一功能，为用户带来更愉悦的交互体验。通过本篇博客，我们深入学习了如何使用 JQuery 实现全选全不选功能，为用户提供更便捷的操作体验。通过简单的代码示例，我们了解了全选全不选的基本实现原理和实际应用场景。同时，通过小贴士的分享，希望能够帮助你更好地运用这一功能，提升页面的交互性和用户体验。

			
		

	



		

			
		



	

		

			

				
					
[Java Web]前端知识

				
			

			

				

					逐梦苍穹的博客
				

				

					02-13
					
					858
					
				

			

		

		

			
				
Java Web之前端简介

			
		

	





	

		

			

				
					
关于java前端的相关技术讲解

				
			

			

				

					qq_58804301的博客
				

				

					06-07
					
					3433
					
				

			

		

		

			
				
----------------------------jQuery时代---------------------------- 1.  HTML 2. css 3.JavaScript 4.JQuery 5. bootstrap 6.easyui ----------------------------前后端分离-------------------------------1. vue2.ElementUI  (1)生命周期/钩子函数：  (2)默认会执行的函数：     (3)常用指令：  (4)路..

			
		

	





	

		

			

				
					
【Java 进阶篇】JQuery 案例：下拉列表选中条目左右移动，打破选择的边界

				
			

			

				

					繁依Fanyi的博客
				

				

					11-15
					
					295
					
				

			

		

		

			
				
下拉列表作为用户界面中常见的选择元素，提供了方便用户选择的途径。然而，在某些场景下，我们可能需要更加灵活的选择方式，例如，在一个有序列表中左右移动选中条目。这时，通过 JQuery 的强大功能，我们可以轻松实现这一交互特性，为用户带来更加便捷的选择体验。通过本篇博客，我们深入学习了如何使用 JQuery 实现下拉列表选中条目的左右移动功能，为用户提供更加灵活的选择方式。通过简单的代码示例，我们了解了这一功能的基本实现原理和实际应用场景。

			
		

	





	

		

			

				
					
javascript/jquery全过程详解

				
			

			

				

					06-14
				

			

		

		

			
				
十年IT行业从业经历，曾就职于上海花旗银行软件开发部担任项目经理多年,任职于国内等多家知名教育机构，精通javaweb， 前端技术，J2EE技术体系，熟练使用Spring、SpringMVC,Mybatis 、hibernate、struts等java和...

			
		

	





	

		

			

				
					
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

				
			

			

				

					01-21
				

			

		

		

			
				
本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考，具体如下： 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发...

			
		

	





	

		

			

				
					
webpack-mvc 传统多页面组件化开发详解

				
			

			

				

					11-28
				

			

		

		

			
				
最近有一个项目，还是使用的传统 MVC 模式开发，完全基于jQuery，使用了基于java模板引擎velocity，页面中嵌入了大量java语法，使得前后端分离不彻底，工程打包上线苦不堪言，为实现后端为服务化，前端也得彻底从...

			
		

	





	

		

			

				
					
java jquery

				
			

			

				

					10-11
				

			

		

		

			
				
jquery技术 代码

			
		

	





	

		

			

				
					
网页抓取之新方法 (在java程序中使用jQuery)

				
			

			

				

					04-17
				

			

		

		

			
				
NULL
博文链接：https://mybeautiful.iteye.com/blog/1442839

			
		

	





	

		

			

				
					
java使用jquery登录例子

				
			

			

				

					08-03
				

			

		

		

			
				
java使用jquery登录例子 简单，容易上手
java使用jquery登录例子 简单，容易上手

			
		

	





	

		

			

				
					
【Java 进阶篇】JQuery 遍历 —— For 循环的奇妙之旅

					
最新发布

				
			

			

				

					繁依Fanyi的博客
				

				

					11-16
					
					588
					
				

			

		

		

			
				
for循环是一种在 JQuery 中遍历元素的基本方式，但在处理 JQuery 对象时，使用each()方法和其他遍历方法更为灵活和方便。了解这些遍历方法，可以让你更加高效地操作页面上的元素，提升前端开发的体验。在实际项目中，选择合适的遍历方式取决于具体的需求。无论是简单的for循环还是强大的each()方法，都是你工具箱中的有用工具。希望通过本文的介绍，你对 JQuery 遍历有了更加深入的理解，能够更加灵活地运用它们。在前端的征途上，愿你的遍历之旅充满奇妙和愉悦。加油吧，少年！作者信息。

			
		

	





	

		

			

				
					
Javaweb-前端三件套入门

				
			

			

				

					m0_71119554的博客
				

				

					01-04
					
					1043
					
				

			

		

		

			
				
ECMAScript6新增了let关键字来定义变量，他的用法类似于var，但是所声明的变量，只在let关键字所在的代码块有效，且不允许重复声明。1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。->超文本：超越了文本限制，比普通文本更加强大，除了文字信息，还可以定义图片，音频，视频等内容。该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象。JavaScript是一门跨平台，面向对象的脚本语言，来控制网页的行为，它能使网页可交互。

			
		

	





	

		

			

				
					
javaWeb学习笔记（前端基础）

				
			

			

				

					zongxuesheng_lzw的博客
				

				

					06-09
					
					206
					
				

			

		

		

			
				
输入与按钮：输入框：对于一个输入框，我们一般会将其包括在一个lable标签中，它和span效果一样，但是我们点击前面文字也能快速获取输入框焦点。input输入框的内容type：输入框的类型 如：password是密码按钮：可input:中的type设置为submit或者button 也可直接使用输入文本框：textarea placeholder默认文本中的内容 checkbox为勾选项 radio为多选项中为下拉选择列表。

			
		

	





	

		

			

				
					
JavaWeb学习总结（四）jQuery

				
			

			

				

					long3359的博客
				

				

					03-18
					
					362
					
				

			

		

		

			
				
JavaWeb学习总结（四）jQuery

			
		

	





	

		

			

				
					
JavaWeb-JQuery

				
			

			

				

					Ego_Ekko的博客
				

				

					01-08
					
					443
					
				

			

		

		

			
				
是JavaScript和查询Query，辅助JavaScript开发的JS类库，实现了很多浏览器的兼容问题，可以是开发更加敏捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

			
		

	





	

		

			

				
					
jquery与java的关系_Jquery就是这么简单

				
			

			

				

					weixin_33999969的博客
				

				

					02-17
					
					679
					
				

			

		

		

			
				
什么是Jquery？Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作就是封装了JavaScript，能够简化我们写代码的一个JavaScript库为什么要使用Jquery？我觉得非常重要的理由就是：它能够兼容市面上主流的浏览器，我们学习AJAX就知道了，IE和FireFox获取异步对象的方式是不一样的，而Jquery能够屏蔽掉这些不兼容的东西...(1...

			
		

	





	

		

			

				
					
crypto-js jquery

				
			

			

				

					11-16
				

			

		

		

			
				
而jquery是一个广泛使用的JavaScript库，它提供了许多便捷的方法来操作DOM、处理事件、发起AJAX请求等。在使用crypto-js时，结合jquery可以更加方便地在网页端进行加密和解密操作。比如，通过jquery的选择器功能可以...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值