Jquery

jQuery由美国人John Resig创建，是流行的JavaScript程序库，是对JavaScript对象和函数的封装，设计思想是write less,do more = 让程序员用更少的代码干更多的事情。虽然jQuery能做的事情JavaScript也都能做，但是使用jQuery能大幅提高开发效率。

jQueryAPI查询：http://jquery.cuishifeng.cn/。

官网：https://jquery.com/。

引入Jquery

1	<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>

1.Jquery选择器

1.1基础选择器

选择器	名称	举例
id选择器	#id	${“#testDiv”}选择id为testDiv的元素
元素名称选择	element	$(“div”)选择所有div标签
类选择器	.class	$(“.myClass”)选择所有class=myClass的元素
选择所有元素	*	${“*”}选择页面所有元素
组合选择器	selector1,selector2,selectorN	$(“div,span,p.myClass”)同时选中多个选择器匹配的元素

1.2层级选择器

选择器	名称	举例
后代选择器	ancestor descendant	${“parent div”}选择id为parent的元素的所有div元素
子代选择器	parent > child	${“parent > div”}选择id为parent的元素的直接div元素(第一个元素)
相邻选择器	prev + next	${“.blue + img”}选择css类为blue的下一个img元素(所有)
同辈选择器	prev ~ siblings	${“.blue ~ img”}选择css类为blue之后的img元素(只匹配第一个)

1.3表单选择器

选择器	名称	举例
表单选择器	:input	$(“:input”)匹配所有 input, textarea, select 和 button 元素, 查找所有的input元素下面这些元素都会被匹配到。
文本框选择器	:text	$(“:text”) 匹配所有的单行文本框,查找所有文本框
密码框选择器	:password	$(“:password”) 匹配所有密码框
单选按钮选择器	:radio	$(“:radio”) 匹配所有单选按钮
复选框选择器	:checkbox	$(“:checkbox”) 匹配所有复选框
提交按钮选择器	:submit	$(“:submit”) 匹配所有提交按钮，
图像域选择器	:image	$(“:image”) 匹配所有图像域
重置选择器	:reset	$(“:reset”) 匹配所有重置按钮
按钮选择器	:button	$(“:button”) 匹配所有按钮
文件域选择器	:file	$(“:file”) 匹配所有文件域

2.属性

2.1获取元素

选择器	名称	举例
attr(属性名称)	设置或返回被选元素的属性值，操作checkbox时，选中返回checkbox，没有选中返回undefined。	attr(“checkbox”) attr(“name”)
prop(属性名称)	获取具有true和false两个属性的属性值	prop(“checkbox”)

属性分类：

固有属性：元素本身就有的属性(id,name,class,style)
返回值是Boolean的属性：checked，selected，disable
自定义属性: 用户自己定义的属性

区别：

如果是固有属性，attr()和prop()方法均可获取
如果是自定义属性，attr()可获取，prop()不可获取
如果返回值是Boolean的属性，若设置属性，attr()返回具体的值，prop()返回true

2.2操作元素样式

方法	说明
attr(“class”)	获取class属性值，即样式名称
attr(“class”,”样式名”)	获取class属性值，修改样式
addClass(“样式名”)	添加样式名称
css()	添加具体样式
removeClass(class)	移除样式名称

2.3操作元素内容

方法	说明
html()	获取元素的html内容(非表单元素)
html(“html 内容”)	设定元素的html内容(非表单元素)
text()	获取元素的文本内容,不包括html(非表单元素)
text(“html 内容”)	设置元素的文本内容,不包括html(非表单元素)
val()	获取元素value值(表单元素)
vak(“值”)	设置元素value值(表单元素)

表单元素：见表单选择器

非表单元素：div、span、h1~h6、table、tr、td、li等

2.4添加元素

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、html元素标记
$(content).prependTo(selector)	把content元素或内容加入selector元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、html元素标记
$(content).appendTo(selector)	把content元素或内容加入selector元素内，默认是结尾
before()	在元素前插入指定的元素或内容:$(selector).before(content)
after()	在元素后插入指定的元素或内容:$(selector).after(content)
addClass()	为每个匹配的元素添加指定的类名:$(selector).addClass(class);

2.5删除元素

方法	说明
remove()	删除所选元素或指定子元素，包括标签和内容一起删除
empt()	清空所选元素的内容

3.Jquery事件

方法	说明
ready(fn)	当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
on(events,[selector],[data],fn)	在选择元素上绑定一个或多个事件的事件处理函数。

ready()

在DOM加载完成时运行的代码，可以这样写：

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

1
2
3

$(document).ready(function(){
  // 在这里写你的代码...
});

使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

1
2
3

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

on()

events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数.

$("p").on("click", function(){
alert( $(this).text() );
});

$("form").on("submit", false);

$("form").on("submit", function(event) {
  event.preventDefault();
});

$("form").on("submit", function(event) {
  event.stopPropagation();
});

4.动画效果

方法	说明
show()	显示隐藏的匹配元素:$(selector).show()
hide()	隐藏显示的元素:$(selector).hide()
toggle()	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。:$(selector).toggle()
slideDown()	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。:$(selector).slideDown(“slow”)
slideUp()	通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。$(selector).slideUp(“slow”)
fadeIn()	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。:$(sellector).fadeIn(“slow”)
fadeOut()	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。:$(sellector).fadeOut(“slow”)
animate()	用于创建自定义动画的函数。

注意：

speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
fn:在动画完成时执行的函数，每个元素执行一次。

animate()

// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});
//让指定元素左右移动
$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});

5.Jquery Ajax

5.1$.ajax

Jquery调用ajax方法：

格式：

// json对象格式 
$.ajax({
    url:" ",//请求地址url
    type:"post",//请求方式GET/POST
    async: true,//是否异步，默认是true异步通信
    data:JSON.stringify({//发送到服务器的数据
        adminId:adminId,
        password:password}),
    contentType: "application/json;charset=UTF-8",//设置请求头
    dataType:"json",//预期服务器返回的数据类型
    success:function (data) {
      //请求成功调用此函数  
    },
    error:function(data){
    //请求失败调用此函数  
	}
});

5.2$.get

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

请求 test.php 网页，忽略返回值。

1	$.get("test.php");

请求 test.php 网页，传送2个参数，忽略返回值。

1	$.get("test.php", { name: "John", time: "2pm" } );

显示 test.php 返回值(HTML 或 XML，取决于返回值)。

1
2
3

$.get("test.php", function(data){
          alert("Data Loaded: " + data);
});

显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。

$.get("test.cgi", { name: "John", time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
});

jQuery 1.12 中 jQuery.get()支持对象参数，具体的参数可以参考 $.ajax()

1
2
3

jQuery.get({
            url: “/example”
});

5.3$.post

同上一样，只是两者均已指定type类型。

5.4$.getJSON

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。注意：此行以后的代码将在这个回调函数执行前执行

url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。

从 Flickr JSONP API 载入 4 张最新的关于猫的图片。

1	<div id="images"></div>

$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format
=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});

从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。

1
2
3

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据。

1
2
3

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

注意：

http GET 和 POST 请求的优缺点、区别以及误区：

post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
post发送的数据更大（get有url长度限制）
post能发送更多的数据类型（get只能发送ASCII字符）
post比get慢
post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据

详情见：https://blog.csdn.net/qq_28483283/article/details/80207674

Bootstrap

小白