jquery学习（jquery基础教程详解）

window.onload=function(){}

onload在dom层和页面加载的资源都加载完成才执行，onload只有一个有效，如果存在多个，后面的覆盖前面的

$(document).ready(function(){}) == $(function(){ });

ready函数只需要在dom层渲染完毕就会执行，ready可以存在多个，按照顺序依次执行

let box=document.getElementById("box"); js获取dom对象

let $box=$(box); 直接jq工厂函数转换dom对象为jq对象

let $box=$("#box"); jq id选择器获取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；

属性:

$("div").attr("title") = $("div").prop("title"): 获取原生属性attr和prop结果相同

$("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属性进行设置，

css函数设置时设置匹配到的所有元素，取值只获取第一个匹配元素的值

$("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();

});