window.onload=function(){}
onload在dom层和网页读取的天然资源都读取顺利完成才继续执行，onload多于两个有效率，假如存有数个，前面的全面覆盖前面的
$(document).ready(function(){}) == $(function(){ });
ready表达式只须要在dom层图形完就会继续执行，ready能存有数个，依照次序依序继续执行
let box=document.getEl
let $box=$(box); 间接jq厂房表达式切换dom第一类为jq第一类
let divDom=div[0] 或是 div.get(0); jq第一类转dom第一类，整体表现为dom第一类的字符串方式
jQuery示例：
纯虚示例：
$(“input[id^=code]”); id特性以code结尾
$(“input[id$=code]”); id特性以code结尾
$(“input[id*=code]”); id特性含code
$(“input[id!=code]”); id特性不等同于code
ID示例：$(“#code”); 开始符号或是第二个
类示例：$(“.code”); 开始符号或是数个
特性示例：$(“[id$=code]”); 开始符号或是数个
$(“div[id]”)：优先选择大部份所含id特性的div元素
标签示例：$(“div”); 开始符号或是数个
并集示例：$(“th,td”)：以逗号隔开，th和td标签
交集示例：$(“input.txtBox#userName”)：数个示例拼在一起，缩小匹配的范围
表单元素示例：
$(“:input”)
$(“:hidden”)
层级示例：
$(“div p”) == $(“div”).find(“p”)：匹配大部份div元素中的p元素
$(“div>p”) == $(“div”).children(“p”)：匹配大部份div元素中的间接子节点p元素
$(“div>*”) == $(“div”).children(“*”)：匹配大部份div元素中的间接子节点元素 ,不含间接
$(“div+p”) == $(“div”).next(“p”)：匹配大部份紧接在div元素后的p元素，相邻
$(“div~p”) == $(“div”).nextAll(“p”) != $(“div”).siblings(“p”)：
匹配div元素之后的大部份兄弟p元素，同一父元素
过滤示例：
$(“li:odd”)：匹配索引为奇数的大部份li标签
$(“li:even”)：匹配索引为偶数的大部份li标签
$(“li:eq(0)”) == $(“li”).eq(0) == $(“li:first”) ：匹配第二个li标签
$(“li:gt(4)”)
表单元素过滤示例 ：
$(“:enabled”)： 匹配大部份的可操作的表单元素
$(“:disabled”)： 匹配大部份的不可操作的表单元素
$(“:checked”)： 匹配大部份的被checked的表单元素$(“select option:selected”):
$(“input:not(:checked)”) == $(“input”).not(“:checked”)
可视化过滤示例：
$(“div:hidden”)：匹配大部份被hidden的div元素
$(“div:visible”)： 匹配大部份可视化的div元素内容示例：
$(“div:contains(John)”)： 匹配大部份div中所含John文本的元素
$(“td:empty”)： 匹配大部份节点为空的td元素的字符串
$(“div:has(p)”)： 匹配大部份所含p标签的div元素
$(“td:parent”)： 匹配大部份以td为父节点的元素字符串动画元素示例：
$(“div:animated”)：匹配大部份具有动效的div元素
常用表达式：
children(selector)
find(selector)
eq(index)
siblings(selector)
next(selector)
nextAll()
prev(selector)
parent()
parents(selector): 从父元素开始匹配，匹配到的集合再用给定的示例过滤，匹配数个
closest(selector)：从当前元素开始匹配，间接匹配到元素就终止，最多就匹配1个
animate({width:”50%”},”slow”); 动画表达式
end(): 在老的元素集基础上，继续匹配新的元素
$(ul.first).find(.foo).css(background-color, red).end().find(.bar).css(background-color, green)
map：
$(“input”).map(function(){ return $(this).val(); }).get().join(“, “)
$.each()：
内部return true == continue ；
内部return false == break；
特性:
$(“input”).attr(“checked”): 选中结果为checked否则undefined
$(“input”).prop(“checked”)：选中结果为true否则false
$(“input”).attr(“checked”,true/false);
$(“input”).attr(“checked”,”checked”) / $(“input”).removeAttr(“checked”);
$(“input”).prop(“checked”,true/false); 设置选中/取消
$(“div”).attr(“my”,”自定义特性”); attr能设置自定义特性
$(“div”).prop(“my”,”自定义特性”); prop设置自定义特性无效
$(“div”).attr({title:”数个特性”,id:”d1″}); 设置数个原生特性attr和prop结果相同
设置是 匹配到的元素全部都设置特性
attr 与 prop的区别：
对于原生特性其效果都一致，prop不支持自定义特性
操作样式：
$(“p”).css({color:”red”,fontSize:”20px”});
就是间接对标签内的style特性进行设置，
$(“p”).addClass(“active hover”)：追加数个class
$(“div”).removeClass(“active”); 移除class
$(“p”).hasClass(“active”); 判断是否具有
$(“p”).toogleClass(“active”); 切换，有则移除，否则追加
$(“p”).toogle(fn, fn); 切换操作
操作DOM：
let $p=$(“<p>我是jq创建的标签</p>”);
$(“#box”).append($p) == $p.appendTo($(“#box”)); p元素追加到box的标签的内部结尾
$(“#box”).prepend($p)==$p.prependTo($(“#box”))：p元素追加到box的标签的内部结尾
$(“#box”).before($p) / $(“#box”).after($p); p元素添加到box的标签的前面/前面
empty清空元素/ remove删除元素/ detach删除元素
$(“#box”).empty(); 清空box元素内大部份内容，box会保留，返回值是box
$(“#box”).remove(); 删除box元素，box消失，返回值是box
$(“#box”).detach(); 删除box元素，box消失，返回值是box
detach 与 remove， detach删除再次追加回网页，其绑定的时间会跟随回来
$(“#box”).clone() 与 $(“#box”).clone(true)：加true是复制box节点和其绑定的事件
操作内容:
$(“li”).text(): 把匹配到的大部份元素的文本内容合并为两个字符串
$(“li”).html(): 只取第二个匹配到的元素内部的内容，包含标签结构
$(“input”).val(): 只取第二个匹配到的表单元素的value的值
$(“li”).text(“设置文本”) != $(“li”).html(“设置文本”); 把大部份li标签内容都变为设置文本
$(“li”).html(“dom”): 把大部份li标签内容都改为dom元素
$(“input”).val(“val”)：大部份input标签value特性的值都为val
$(“p”).wrap(“<div class=wrap></>”): 把匹配到的p元素用div元素包裹起来
html和text表达式只对非表单元素有效率，val只对表单元素有效率
操作位置：
scrollTop()/ scrollLeft()/ offset()/ postion()
事件：
事件名表达式方式绑定 / bind绑定 / bind绑定
$(“#box”).click(function(){}); 只能绑定HTML支持的原生事件
$(“#box”).bind(“click”,function(){});
$(“#box”).on(“click mouseover mouserout”,function(){})
.unbind(“click”)/ .off(“click”)/ .off(“click mouseout”)：解绑事件
$(“#box”).trigger(“click”); 触发事件
screenX/screenY ：屏幕左上角的X/Y轴坐标
clientX/clientY : 浏览器左上角的X/Y轴坐标
pageX/pageY ： 网页左上角的X/Y轴坐标
stopPropagation() ：阻止事件冒泡到父元素
preventDefault() ：阻止元素发生默认的行为
return false; : 阻止事件冒泡和默认行为
动画:
显示(show) / 隐藏(hide)
滑入(slideDown)/ 滑出(slideUp)/ 切换(slideToggle)
淡入(fadeIn)/ 淡出(fadeOut)/ 切换(fadeToggle)
fadeTo :变化到指定透明度
自定义动画: animate表达式
function aniDiv(){
$(“div:eq(0)”).animate({width:”50%”},”fast”);
$(“div:eq(0)”).animate({width:”100%”},”slow”,aniDiv);
}
aniDiv();
停止动画:
stop(是否清除队列,是否立即顺利完成当前动画);
自定义插件:
设置静态方法: $.方法名=function([参数列表])；
使用静态方法：$.方法名([实参列表]); $.getRandom(5,25)
(function($){ $.getRandom=function (min,max) {} })(jQuery);
设置实例方法 : $.fn.方法名=function([参数列表]);
使用实例方法：$(selector).方法名([实参列表]); $(“box”).changeColor(“#FFF”);
(function($){$.fn.changeColor=function (color) { } })(jQuery);
使元素居屏幕中间位置
$(document).ready(
jQuery.fn.center = function () {
this.css(“position”,”absolute”);
this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”); this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”); return this;
}
$(“#id”).center();
});
