Review: JQuery
2024-09-05 18:23:49
1.DOM access with jQuery
1 $("h1"); //select all the h1s
2 $("#heading"); // selects the element with id of "heading"
3 $(".waring"); //selects all the element with class name of "warning"
The jQuery function can be named $ or jQuery
$("h1"); //have the same effect
jQuery("h1");
2.DOM modification with jQuery
// Set their inner text with text().
$("h1").text("All about cats"); //Set their inner html with html().
$("h1").html("I <strong>love</strong> cats"); //set attributes with attr();
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com"); //change CSS styles with css().
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"}); //add a class name with addClass().
$("h1").addClass("warning"); //create new element
var $p = $("<p>");
var $p = $('<p style="color:red;">I love people who love cats.</p>'); //append().
$("#main-div").append($p); //insert element by prepend() or appendTo().
$("#dessert").prepend("<div class='scoop " + flavors[indexNumber] + "'></div>"); $alone.appendTo("#party");
3.jQuery collections & looping
jQuery collections
1 //when you use jQuery to find elements,
2 //jQuery return back a jQuery collection object.
3 var $heading = $('h1');
4
5 //turn a DOM node into a jQuery object
6 var $heading = $(heading);
7
8 //retrieve the DOM node out of a jQuery object
9 var heading = $heading[0];
looping through collections
1 // jQuery's each():
2 $("p").each(function(index, element) {
3 $(element).text( $(element).text() + "!!");
4 });
5
6 // this keyword
7 $("p").each(function() {
8 $(this).text( $(this).text() + "!!");
9 });
4.DOM events in jQuery
Adding an event listener
1 $("#save-button").on("click", function() {
2 // handle click event
3 });
4
5 $("#face-pic").on("click", function(event) {
6 var mouseX = event.pageX;
7 var mouseY = event.pageY;
8 });
Triggering events
1 $("#save-button").trigger("click");
checking DOM readiness
$(document).ready(function() {
$("h1").text("Y'all ready for this?");
}); //pass your code to the jQuery function:
$(function() {
$("h1").text("Y'all ready for this?");
});
5.Processing forms with jQuery
// add an event listener to the form element
$("form").on("submit", function() {
// process form
}); // If you are processing the form entirely in jQuery,
//then you should call preventDefault() to prevent the page reloading
$("form").on("submit", function(event) {
event.preventDefault();
// process form
}); // filled out for an input in a form
// you should typically use val() var answer = $("#answer").val(); // Inside the callback function, you can reference
// the form element using the this keyword. $("form").on("submit", function() {
// store the value of the input with name='age'
var age = $(this).find('[name=age]').val();
});
6.DOM animation in jQuery
Changing visbility
// for some visibility change
$("#pic").hide();
$("#pic").show();
$("#pic").toggle(); //You can pass a callback function as the second
//parameter to any of those functions
$("#pic").toggle(1000, function() {
$("body").append("It's here!");
}); // chain multiple effects together
$("#pic").slideUp(300).delay().fadeIn();
custom animation
$("#pic").animate({
width: "70%",
opacity: 0.7,
padding: 20
}, 1000);
最新文章
- OC #import和@class的用法和区别
- poj 1266 Cover an Arc.
- Windows下常用软件工具的命令
- (原创)android中使用相机的两种方式
- Apache 的 httpd.conf 详解
- Shell 教程
- 同时使用Binding&;StringFormat 显示Text【项目】
- 【spoj SEQN】【hdu 3439】Sequence
- Bzoj 2141: 排队 分块,逆序对,树状数组
- Oracel用rownum实现真分页
- bzoj 2331: [SCOI2011]地板 插头DP
- centos 下mysql操作
- VS Code调试.NET Core
- 一道月薪3W的java面试题 (小明和小强都是张老师的学生,张老师的生日是某月某日,2人都不知道张老师的生日)
- 普通的年轻状态机,纯C语言
- Linux 配置VNC远程桌面
- 关系型数据库工作原理-数据库整体框架(翻译自Coding-Geek文章)
- Oracle的条件in中包含NULL时的处理
- 【BZOJ2242】计算器(BSGS,快速幂)
- 9个顶级开发IoT项目的开源物联网平台