jQuery基础
欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot
jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程
安装
标签应该位于页面的 <head> 部分
<head>
<script src="jquery.js"></script>
</head>
基本语法
$(selector).action();
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery 选择器
元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
CSS 选择器
$("p").css("background-color","red");
$("p").css({"background-color":"yellow","font-size":"200%"});
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 事件函数
$("button#demo").click(function(){$("img").hide()})
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
立即执行函数
语法 1
$(document).ready(function);
语法 2
$().ready(function);
语法 3
$(function);
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
事件三种方法
$(function(){
//方式1
$("#clickBtn").click(function(){
alert(1);
});
//方式2： 支持事件冒泡(兼容性非常好)
$("#clickBtn").on("click",function(){
alert(2);
});
$("#clickBtn").off("click"); //注销事件
//方式3：
$(selector).bind(event,data（可选，规定传递到函数的额外数据。）,function)；
$("#clickBtn").bind("click",function(){
alert(3);
});
$("#clickBtn").unbind("click"); //注销事件
});
jQuery 效果 - 隐藏和显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
$(selector).toggle(speed,callback);
jQuery 效果 - 淡入淡出
jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);
jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
jQuery 效果 - 滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
jQuery - Chaining
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery 参考手册 - 文档操作
jQuery 参考手册 - 属性操作
jQuery 参考手册 - CSS 操作
jQuery - 内容和属性
内容 - text()、html() 以及 val()
$("#test").text();
$("#test1").text("Hello world!");
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
属性 - attr()
$("#w3s").attr("href");
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
添加新的 HTML 内容：append() 和 prepend() 方法能够通过参数接收无限数量的新元素。
可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
var txt1="<p>Text</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
删除元素/内容：
$("#div1").remove(); //删除被选元素及其子元素。
$("#div1").empty(); //删除被选元素的子元素。
$("p").remove(".italic"); //删除 class="italic" 的所有 <p> 元素
}
