jQuery语法

作者: 冰land | 来源:发表于2018-06-28 16:21 被阅读9次

jQuery（一）
2018-04-11JQuery 语法
JQuery语言
jQuery
jQuery学习笔记（一）
Web前端之jQuery
jQuery
jqurey
jQuery学习记录
jQuery语法

1.基础语法

通过jQuery，可以选取(查询， query)HTML元素，并对它们执行“操作”。

$(this).hide()
隐藏当前的HTML元素。

$("#test").hide()
隐藏id=“test”的元素。

$("p").hide()
隐藏所有<p>元素

$(".test").hide()
隐藏所有class=“test”的元素

文档就绪函数：防止文档在完全加载（就绪）之前运行jQuery代码。
$(document).ready(function(){
//操作
});

2.选择器

元素选择器

$("p")选取<p>元素。
$("p.intro")选取所有class="intro"的<p>元素。
$("p#intro")选取所有id="demo"的<p>元素。

属性选择器

$("[href]")选取所有带有href属性的元素
$("[href='#']")选取所有带有href值等于"#"的元素
$("[href!='#']")选取所有带有href值不等于'#'的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素

CSS选择器

CSS选择器可用于改变HTML元素的CSS属性。

//把所有p元素的背景颜色更改为红色：
$("p").css("background-color","red");

3.事件

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中。

jQuery 名称冲突
jQuery 使用名为 noConflict() 的方法来解决该问题

<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
</script>

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

事件函数：

$(document).ready(function)：将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)：触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)：触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)：触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)：触发或将函数绑定到被选元素的鼠标悬停事件

jQuery效果

1.隐藏/显示

hide()：隐藏HTML元素
show()：显示HTML元素

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

语法：
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。
可选的callback参数是隐藏/显示完成所执行的的函数名称。

$("button").click(function(){
  $("p").hide(1000);
});

语法：
$(selector).toggle(speed,callback);
切换hide()和show()方法。
显示被隐藏的元素，并隐藏已显示的元素

$("button").click(function(){
  $("p").toggle();
});

2.淡入淡出

语法：
$(selector).fadeIn(speed,callback);
用于淡入已隐藏的元素

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

语法：
$(selector).fadeOut(speed, callback);
用于淡出可见元素

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

语法：
$(selector).fadeToggle(speed,callback);
可以在fadeIn()与fadeOut()方法之间切换。
如果元素已淡出，则fadeToggle()会向元素添加淡入效果。
如果元素已淡入，则fadeToggle()会向元素添加淡出效果。

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

语法：
$(selector).fadeTo(speed, opacity, callback);
speed必传参数，规定效果的时长，
opacity必传参数，规定淡入淡出设置为给定的不透明度(值介于0与1之间)。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3.滑动

语法：
$(selector).slideDown(speed,callback);
用于向下滑动元素。

$("#flip").click(function(){
  $("#panel").slideDown();
});

语法：
$(selector).slideUp(speed, callback);
用于向上滑动元素。

$("#flip").click(function(){
  $("#panel").slideUp();
});

语法：
$(selector).slideToggle(speed,callback);
可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4.动画

语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

$("button").click(function(){
  $("div").animate({left:'250px'});
});

可以定义相对值（该值相对于元素的当前值）。需要再值得前面加上+=或-=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

可以使用预定的值
把属性的动画值设置为"show"、"hide"或"toggle"

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

【注】
默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
当使用animate()时，必须使用Camel（驼峰）标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

5.停止动画

stop() 方法用于在动画或效果完成前对它们进行停止。

语法：
$(selector).stop(stopAll,goToEnd);

说明：
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

$("#stop").click(function(){
  $("#panel").stop();
});

6.Chaining

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery HTML

1.获取

获得内容 - test()、html()以及val()

test() — 设置或返回所选元素的文本内容
html() — 设置或返回所选元素的内容（包括 HTML 标记）
val() — 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 — attr()

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

2.设置

设置内容

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

text()、html() 以及 val() 的回调函数
text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

设置属性

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

attr()的回调函数

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

3.添加

append()：在被选元素的结尾插入内容
prepend()：在被选元素的开头插入内容
after()：在被选元素之后插入内容
before()：在被选元素之前插入内容

$("p").append("Some appended text.");

$("p").prepend("Some prepended text.");

4.删除

remove() ：删除被选元素（及其子元素）
empty() ：从被选元素中删除子元素

$("#div1").remove();

$("#div1").empty();

过滤被删除的元素
remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");

5.CSS类

addClass() — 向被选元素添加一个或多个类
removeClass() — 从被选元素删除一个或多个类
toggleClass() — 对被选元素进行添加/删除类的切换操作
css() — 设置或返回样式属性

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

6.css()

返回css属性
语法：css("propertyname");

$("p").css("background-color");

设置css属性
语法：css("propertyname", "value");

$("p").css("background-color","yellow");

设置多个css属性
语法：css({"propertyname":"value","propertyname":"value",...});

$("p").css({"background-color":"yellow","font-size":"200%"});

7.尺寸

width() ：设置或返回元素的宽度（不包括内边距、边框或外边距）
height() ：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() ：返回元素的宽度（包括内边距）
innerHeight() ：返回元素的高度（包括内边距）
outerWidth() ：返回元素的宽度（包括内边距和边框）
outerHeight() ：返回元素的高度（包括内边距和边框）
outerWidth(true) ：方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) ：方法返回元素的高度（包括内边距、边框和外边距）

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

$("button").click(function(){
  var txt="";
  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

//返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度
$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

jQuery遍历

1.向上遍历DOM树

parent() ：返回被选元素的直接父元素，该方法只会向上一级对DOM树进行遍历。

//返回每个 <span> 元素的的直接父元素
$(document).ready(function(){
  $("span").parent();
});

parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

//返回所有 <span> 元素的所有祖先
$(document).ready(function(){
  $("span").parents();
});
//返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil() ：返回介于两个给定元素之间的所有祖先元素

//返回介于 <span> 与 <div> 元素之间的所有祖先元素
$(document).ready(function(){
  $("span").parentsUntil("div");
});

2.向下遍历DOM树

children() ：返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。

//返回每个 <div> 元素的所有直接子元素
$(document).ready(function(){
  $("div").children();
});
//返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
$(document).ready(function(){
  $("div").children("p.1");
});

find() ：返回被选元素的后代元素，一路向下直到最后一个后代。

//返回属于 <div> 后代的所有 <span> 元素
$(document).ready(function(){
  $("div").find("span");
});
//返回 <div> 的所有后代
$(document).ready(function(){
  $("div").find("*");
});

3.水平遍历DOM树

siblings() ：返回被选元素的所有同胞元素。

//返回 <h2> 的所有同胞元素
$(document).ready(function(){
  $("h2").siblings();
});
//返回属于<h2>的同胞元素的所有<p>元素
$(document).ready(function(){
  $("h2").siblings("p");
});

next() ：返回被选元素的下一个同胞元素，该方法只返回一个元素。

//返回 <h2> 的下一个同胞元素
$(document).ready(function(){
  $("h2").next();
});

nextAll() ：返回被选元素的所有跟随的同胞元素。

//返回<h2>的所有跟随的同胞元素
$(document).ready(function(){
  $("h2").nextAll();
});

nextUntil() ：返回介于两个给定参数之间的所有跟随的同胞元素。

//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$(document).ready(function(){
  $("h2").nextUntil("h6");
});

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

prev()
prevAll()
prevUntil()

4.过滤元素

first() ：返回被选元素的首个元素

//选取首个 <div> 元素内部的第一个 <p> 元素
$(document).ready(function(){
  $("div p").first();
});

last() ：返回被选元素的最后一个元素

//选择最后一个 <div> 元素中的最后一个 <p> 元素
$(document).ready(function(){
  $("div p").last();
});

eq() ：返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

$(document).ready(function(){
  $("p").eq(1);
});

filter() ：不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

//返回带有类名 "intro" 的所有 <p> 元素
$(document).ready(function(){
  $("p").filter(".intro");
});

not() ：返回不匹配标准的所有元素。与filter()相反。

//返回不带有类名 "intro" 的所有 <p> 元素
$(document).ready(function(){
  $("p").not(".intro");
});

jQuery（一）
jQuery语法基础语法：$(selector).action(),美元符号定义jQuery,选择符select...
2018-04-11JQuery 语法
JQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(s...
JQuery语言
jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(s...
jQuery
jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(s...
jQuery学习笔记（一）
jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(s...
Web前端之jQuery
jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(s...
jQuery
jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(se...
jqurey
jQuery 语法基础语法是：$(selector).action() 美元符号定义 jQuery选择符（sel...
jQuery学习记录
jQuery的引入一.jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函...
jQuery语法
jQuery语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法：$(se...

jQuery语法

1.基础语法

2.选择器

3.事件

jQuery效果

1.隐藏/显示

2.淡入淡出

3.滑动

4.动画

5.停止动画

6.Chaining

jQuery HTML

1.获取

2.设置

3.添加

4.删除

5.CSS类

6.css()

7.尺寸

jQuery遍历

1.向上遍历DOM树

3.水平遍历DOM树

4.过滤元素

相关文章

jQuery（一）

2018-04-11JQuery 语法

JQuery语言

jQuery

jQuery学习笔记（一）

Web前端之jQuery

jQuery

jqurey

jQuery学习记录

jQuery语法

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读