jQuery

发布时间：2023-09-06 02:34责任编辑：苏小强关键词：jQuery

jQuery

文档1：点击文档2：点击

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

一、jQuery对象

通过jQuery包装DOM对象后产生的对象
jQuery 对象是 jQuery 独有的
如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$
$variable[0]:jquery对象转为dom对象(推荐) 或者 $variable.get(0)也一样$("#msg").html(); $("#msg")[0].innerHTML
var $obj = $(domObj);DOM对象转jQuery对象$(document).ready(function(){});就是典型的DOM对象转jQuery对象

二、寻找元素(选择器和筛选器)

1、基本选择器 ???$("*") ?$("#id") ??$(".class") ?$("element") ?$(".class,p,div")2、层级选择器 ???$(".outer div") ?$(".outer>div") ??$(".outer+div") ?$(".outer~div")3、属性选择器 ???$(‘[]‘) $("[name!=‘newsletter‘]") ?$("[name^=‘news‘]") ?$("input[name*=‘man‘]") ?$("input[id][name$=‘man‘]")//且的关系4、表单选择器 ???$("[type=‘text‘]") = $("input:text") = $(":text") ??//注意只适用于input标签5、表单对象属性 ???$("input:enabled") $("input:disabled") $("input:checked") $("select option:selected")=$("option:selected")1、基本筛选器 ???$("li:first") ?$("li:eq(2)") ?$("li:even") ?$("li:gt(1)")2、过滤筛选器 ???$("li").eq(2) ?$("li").first() ?$("ul li").hasClass("test") ?$("p").filter(".selected, :first") //或的关系3、查找筛选器 ????查找子标签： ????????$("div").children(".test") ?????$("div").find(".test") ????向下查找兄弟标签： ???$(".test").next() ??????????????$(".test").nextAll() ???????????????????????$(".test").nextUntil() ????向上查找兄弟标签： ???$("div").prev() ?????????????????$("div").prevAll() ???????????????????????$("div").prevUntil() ????查找所有兄弟标签： ???$("div").siblings() ????查找父标签： ????????$(".test").parent() ?????????????$(".test").parents() ???????????????????????$(".test").parentsUntil()4、返回（选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素） ???$("p").find("span").end()

三、事件

1、页面载入 ???$(document).ready(function(){}) = ?$(function(){})　2、事件绑定 ?//语法:标签对象.事件(函数) ???$("p").click(function(){})3、事件委派 ???$("").on(eve,[selector],[data],fn) ?// 在选择元素上绑定一个或多个事件的事件处理函数。 ???$("ul").on("click","li",func) ?$("ul").off("click","li",func) ???$("p").on("click", function(){ alert( $(this).text());});4、事件切换 ???$(".test").hover(enter,out) ???hover事件： ???????一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 ???????over:鼠标移到元素上要触发的函数 ???????out:鼠标移出元素要触发的函数

<!DOCTYPE html><html lang="en" style="padding: 0px"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><ul> ???<li>1</li> ???<li>2</li> ???<li>3</li></ul><hr><button >Add_li</button><button >off</button><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>/* ???$("ul li").click(function(){ ???????alert(123) ???}); ???$("#off").click(function(){ ???????$("ul li").off() ????})*/ ???$("#add_li").click(function(){ ???????var $ele=$("<li>"); ???????$ele.text(Math.round(Math.random()*10)); ???????$("ul").append($ele) ???}); ???function test(){alert(222)} ???$("ul").on("click","li",test) ???$("#off").click(function(){ ???????$("ul").off("click","li",test) ????})</script></body></html>

事件委派

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.test{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: wheat; ???????} ???</style></head><body><div ></div></body><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>function enter(){ ???console.log("enter")}function out(){ ???console.log("out")}$(".test").hover(enter,out)/*$(".test").mouseenter(function(){ ???????console.log("enter")});$(".test").mouseleave(function(){ ???????console.log("leave") ???});*/</script></html>

事件切换

四、操作属性

1、CSS类 ???$("").addClass(class|fn) ???$("").removeClass([class|fn])2、属性 ???$("").attr(); ?//对于HTML元素的自定义DOM属性，在处理时，使用attr方法。 ???$("").removeAttr(); ???$("").prop(); ?//对于HTML元素的固有属性，在处理时，使用prop方法。 ???$("").removeProp(); ???注意： ???????//像checkbox，radio和select这样的元素，选中属性对应"checked"和"selected"，这些也属于固有属性 ???????//因此需要使用prop方法去操作才能获得正确的结果。3、HTML代码/文本/值 ???$("").html([val|fn]) ???$("").text([val|fn]) ???$("").val([val|fn|arr])4、CSS样式 ???$("#c1").css({"color":"red","fontSize":"35px"}) ??$("p").css("color","red")

五、操作节点

1、创建一个标签对象 ???$("<p>")2、内部插入 ???$("").append(content|fn) ?????----->$("p").append("<b>Hello</b>"); ???$("").appendTo(content) ??????----->$("p").appendTo("div"); ???$("").prepend(content|fn) ????----->$("p").prepend("<b>Hello</b>"); ???$("").prependTo(content) ?????----->$("p").prependTo("#foo");3、外部插入 ???$("").after(content|fn) ??????----->$("p").after("<b>Hello</b>"); ???$("").before(content|fn) ?????----->$("p").before("<b>Hello</b>"); ???$("").insertAfter(content) ???----->$("p").insertAfter("#foo"); ???$("").insertBefore(content) ??----->$("p").insertBefore("#foo");4、替换 ???$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");5、删除 ???$("").empty() ???$("").remove([expr])6、复制 ???$("").clone([Even[,deepEven]])

六、操作位置/尺寸

位置操作 ???$("").offset([coordinates]) //相对当前视口的偏移,只对可见元素有效。 ???$("").position() ???????????//相对父元素的偏移,只对可见元素有效。 ???$("").scrollTop([val]) ?????//相对滚动条的偏移,此方法对可见和隐藏元素均有效。 ???$("").scrollLeft([val])尺寸操作 ???$("").height([val|fn]) ???$("").width([val|fn]) ???$("").innerHeight() ????????//获取内部区域高度（包括补白、不包括边框）,此方法对可见和隐藏元素均有效。 ???$("").innerWidth() ???$("").outerHeight([soptions]) ??//获取外部高度（默认包括补白和边框）,设置为true时，计算边距在内,此方法对可见和隐藏元素均有效。 ???$("").outerWidth([options])

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body{ ???????????margin: 0; ???????} ???????.returnTop{ ???????????height: 60px; ???????????width: 100px; ???????????background-color: peru; ???????????position: fixed; ???????????right: 0; ???????????bottom: 0; ???????????color: white; ???????????line-height: 60px; ???????????text-align: center; ???????} ???????.div1{ ???????????background-color: wheat; ???????????font-size: 5px; ???????????overflow: auto; ???????????width: 500px; ???????????height: 200px; ???????} ???????.div2{ ???????????background-color: darkgrey; ???????????height: 2400px; ???????} ???????.hide{ ???????????display: none; ???????} ???</style></head><body> ????<div > ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ??????????<h1>hello</h1> ????</div> ????<div ></div> ????<div >返回顶部</div> ????<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> ???<script> ????????$(window).scroll(function(){ ????????????var current=$(window).scrollTop(); ?????????????if (current>100){ ?????????????????$(".returnTop").removeClass("hide") ?????????????} ?????????????else { ?????????????$(".returnTop").addClass("hide") ?????????} ????????}); ???????????$(".returnTop").click(function(){ ???????????????$(window).scrollTop(0) ???????????}); ???</script></body></html>

返回顶部

七、each循环

1、$.each(obj,fn)

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>

li=[10,20,30,40];

dic={name:"alex",sex:"male"};

list=[{name:"alex",sex:"male"},{name:"alex22",sex:"female"}];

$.each(li,function(i,x){

console.log(i,x)

});

$.each(dic,function(i,x){

console.log(i,x)

});

$.each(list,function(i,x){

console.log(i,x)

});

/*

0 10

1 20

2 30

3 40

name alex

sex male

0 {name: "alex", sex: "male"}

1 {name: "alex22", sex: "female"}

*/

</script>

2、$("").each(fn)

<body>

<p>111</p>

<p>222</p>

<p>333</p>

</body>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>

$("p").each(function(){

console.log($(this).html()) //$(this)代指当前循环标签。

})

/*

111

222

333

*/

</script>

each扩展

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>

function f(){

for(var i=0;i<4;i++){

if (i==2){

return

}

console.log(i) // 1,2

}

f();

$.each($("p"),function(i,v){

if (i==2){

return false;

}

console.log(v) //A B

});

$.each($("p"),function(i,v){

if (i==2){

return true;

}

console.log(v) //A B D

});

li=[11,22,33,44];

$.each(li,function(i,v){

if (v==33){

return ;

}

console.log(v) //11,22,44

});

$.each(li,function(i,v){

if (v==33){

return false;

}

console.log(v) //11,22

});

// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true

// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

</script>

八、动画效果

<script>

//显隐

$(document).ready(function() {

$("#hide").click(function () {

$("p").hide(1000);

});

$("#show").click(function () {

$("p").show(1000);

});

//用于切换被选元素的 hide() 与 show() 方法。

$("#toggle").click(function () {


	

	知识推荐
	
	Bootstrap+PHP表单验证实例
js操作一般文件和csv文件
记录一次爬虫报错：Message: Failed to decode response from marionette
chrome F12_Network 开发者工具详解
PHP 与 HTML 混编
jQuery之on
JS ?获取元素对象/添加节点
针对网站漏洞怎么修复区块链漏洞之以太坊
web开发布局---传统布局篇
03-HTML的body标签（文本标签）学习
DataURL 初探
HTTP压力测试工具wrk的安装及测试
Flask简易版本、Ajax、DOM操作，表单操作
常忽略的css技巧
PHP Sessions
ASP.Net Core 2.2 MVC入门到基本使用系列 (四)
jquery添加刪除
https


  我的编程学习网——分享web前端后端开发技术知识。  垃圾信息处理邮箱 tousu563@163.com   网站地图
  icp备案号 闽ICP备2023006418号-8
  不良信息举报平台 
  互联网安全管理备案
  Copyright  2023 www.wodecom.cn All Rights Reserved