前端入门知识：jQuery
这一章我们来了解jQuery。
jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
引入jQuery的方式
const div1=document.getElementById('div1')
$('#div1')
console.log($(div1))//js dom ==>jq dom
console.log($('#div1')[0])//jq dom==>js dom
实例：
console.log($('.liC'))
console.log($('ul'))
console.log($('ul>li'))
console.log($('ul,div'))
console.log($('#div1+ul'))
console.log($('#div1~ul'))
改变CSS样式
$('#div1').css('color','yellow')//单行css样式
$('#div1').css({//多行css样式
'color':'red',
'background':'lightblue',
"width":"100px"
})
选择器
#id ┊ $("#div1") 查找 ID 为"myDiv"的元素
element ┊ $("div") 根据给定的元素标签名匹配所有元素
.class ┊ $(".Class") 查找所有类是 "Class" 的元素
* ┊ $("*") 匹配所有元素
selector1,selector2,selectorN ┊ $("div,span,p.Class") 找到匹配任意一个类的元素
层级
ancestor descendant $("form input") 找到表单中所有的 input 元素(在给定的祖先元素下匹配所有的后代元素)
parent > child $("form > input") 匹配表单中所有的子级input元素
prev + next $("label + input") 匹配所有跟在 label 后面的 input 元素
prev ~ siblings $("form ~ input")//找到所有与表单同辈的 input 元素 匹配prev元素之后的所有siblings元素
事件
页面载入
ready(fn) $(document).ready(function(){ // 在这里写代码...}); 在DOM就绪时执行的函数
事件处理
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
$("p").on("click", function(){alert( $(this).text() );});
//单击段落文本时，在警报中显示该文本
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin"
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
off(events,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。
$("p").off( "click", "**" )
//从所有段落中删除所有委托的点击处理程序
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin"
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上，或特殊值false.
one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
$("p").one("click", function(){ alert( $(this).text() );});
//当所有段落被第一次点击的时候，显示所有其文本。
type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:将要传递给事件处理函数的数据映射
fn:每当事件触发时执行的函数。
事件切换
hover([over,]out) 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。(事件切换)
$("td").hover(
function () {$(this).addClass("hover");},
function () {$(this).removeClass("hover");});
//鼠标悬停的表格加上特定的类
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
事件
blur([[data],fn]) 当元素失去焦点时触发 blur 事件。
$("p").blur();//触发所有段落的blur事件
data:blur([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的blur事件中绑定的处理函数。
change([[data],fn]) 当元素的值发生改变时，会发生 change 事件。
$(selector).change();//触发被选元素的 change 事件
data:change([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的change事件中绑定的处理函数。
click([[data],fn]) 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数
$("p").click();//触发页面内所有段落的点击事件
$("p").click( function () { $(this).hide(); });//将页面内所有段落点击后隐藏。
data:click([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的click事件中绑定的处理函数。
dblclick([[data],fn]) 当双击元素时，会发生 dblclick 事件。
$("p").dblclick( function () { alert("Hello World!"); });
//给页面上每个段落的双击事件绑上 "Hello World!" 警告框
focus([[data],fn]) 当元素获得焦点时，触发 focus 事件。
$(document).ready(function(){$("#login").focus();});
//当页面加载后将 id 为 'login' 的元素设置焦点
$("input[type=text]").focus(function(){this.blur();});
//使人无法使用文本框
focusin([data],fn)
当元素获得焦点时，触发 focusin 事件。跟focus区别是可以在父元素上检测子元素获取焦点的情况
$("p").focusin(function() {$(this).find("span").css('display','inline').fadeOut(1000);});
//获得焦点后会触发动画
focusout([data],fn) 当元素失去焦点时触发 focusout 事件
$("p").focusout(function(){$(this).find("span").css('display','inline').fadeOut(1000);});
//失去焦点后会触发动画
keydown([[data],fn])
$(window).keydown(function(event){
switch(event.keyCode) {
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: https://unixpapa.com/js/key.html
// 常用keyCode： 空格 32 Enter 13 ESC 27
}
});
keypress([[data],fn]) 当键盘或按钮被按下时，发生 keypress 事件。
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keyup([[data],fn]) 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上
$("input").keyup(function(){$("input").css("background-color","#D6D6FF");});
//当按下按键时，改变文本域的颜色
mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
$("button").mousedown(function(){$("p").slideToggle();});
//当按下鼠标按钮时，隐藏或显示元素
mouseenter([[data],fn]) 当鼠标指针穿过元素时发生,该事件大多数时候会与mouseleave 事件一起使用
$("p").mouseenter(function(){$("p").css("background-color","yellow");});
//当鼠标指针进入（穿过）元素时，改变元素的背景色
mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件
$("p").mouseleave(function(){$("p").css("background-color","#E9E9E4");});
//当鼠标指针离开元素时，改变元素的背景色
mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
$(document).mousemove(function(e){$("span").text(e.pageX + ", " + e.pageY);});
//获得鼠标指针在页面中的位置
mouseout([[data],fn]) 当鼠标指针从元素上移开时，发生 mouseout 事件
$("p").mouseout(function(){$("p").css("background-color","#E9E9E4");});
//当鼠标从元素上移开时，改变元素的背景色
mouseover([[data],fn]) 当鼠标指针位于元素上方时，会发生 mouseover 事件
$("p").mouseover(function(){$("p").css("background-color","yellow");});
//当鼠标指针位于元素上方时时，改变元素的背景色
mouseup([[data],fn]) 当在元素上放松鼠标按钮时，会发生 mouseup 事件
$("button").mouseup(function(){$("p").slideToggle();});
//当松开鼠标按钮时，隐藏或显示元素
resize([[data],fn]) 当调整浏览器窗口的大小时，发生 resize 事件
$(window).resize(function(){alert("Stop it!");});
//让人每次改变页面窗口的大小时很郁闷的方法
scroll([[data],fn]) 当用户滚动指定的元素时，会发生 scroll 事件
$(window).scroll( function() { /* ...do something... */ } );
//当页面滚动条变化时，执行的函数
$("div").scroll(function() {$("span").text(x+=1);});
//对元素滚动的次数进行计数
select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
$("input").select();//触发所有input元素的select事件
$(":text").select(function(){代码});//当文本框中文本被选中时执行的函数
submit([[data],fn]) 当提交表单时，会发生 submit 事件
$("form:first").submit();//提交本页的第一个表单
$("form").submit(function(){return false;});//如果你要阻止表单提交
CSS
CSS
css(name|pro|[,val|fn]) 访问匹配元素的样式属性。
$("p").css("color");
//取得第一个段落的color样式属性的值
$("p").css({ "color": "#ff0011", "background": "blue" });
//将所有段落的字体颜色设为红色并且背景为蓝色
$("div").click(function(){$(this).css({width: function(index, value)
{return parseFloat(value);}, height: function(index, value)
{return parseFloat(value);}});});
//逐渐增加div的大小
jQuery.cssHooks
直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法
目的是为了标准化 CSS 属性名或创建自定义属性。
$.cssHooks 对象提供了一种通过定义函数来获取或设置特定 CSS 值的方法。
可以用它来创建新的 cssHooks 用于标准化 CSS3 功能，例如，盒子阴影（box shadows）及渐变（gradients）
位置
offset([coordinates]) 获取匹配元素在当前视口的相对偏移
(返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。)
//获取第二段的偏移
<!--无参数描述:-->
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
<!--参数coordinates 描述:-->
$("p:last").offset({ top: 10, left: 30 });
position() 获取匹配元素相对父元素的偏移
//获取第一段的偏移
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
scrollTop([val]) 获取匹配元素相对滚动条左侧的偏移。(此方法对可见和隐藏元素均有效。)
//获取第一段相对滚动条左侧的偏移
<!--无参数描述:-->
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
<!--参数val 描述:-->
$("div.demo").scrollLeft(300);
scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。(此方法对可见和隐藏元素均有效。)
//获取第一段相对滚动条左侧的偏移
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
尺寸
height([val|fn]) 取得匹配元素当前计算的高度值（px）
(在 jQuery 1.2 以后可以用来获取 window 和 document 的高)
//以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
width([val|fn]) 取得第一个匹配元素当前计算的宽度值（px）
//以 10 像素的幅度增加 p 元素的宽度
$("button").click(function(){
$("p").width(function(n,c){
return c+10;
});
});
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])
效果
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
属性
属性
attr(name|pro|key,val|fn)
removeAttr(name)
prop(n|p|k,v|f)
removeProp(name)
CSS 类
addClass(class|fn)
removeClass([class|fn])
toggleClass(class|fn[,sw])
HTML代码/文本/值
html([val|fn])
text([val|fn])
val([val|fn|arr])
文档处理
内部插入
append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)
外部插入
after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)
包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
替换
replaceWith(content|fn)
replaceAll(selector)
删除
empty()
remove([expr])
detach([expr])
复制
clone([Even[,deepEven]])
浙公网安备 33010602011771号