分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

Review: JQuery

发布时间:2023-09-06 01:55责任编辑:傅花花关键词:暂无标签

1.DOM access with jQuery

1 $("h1"); ????//select all the h1s2 $("#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 elementvar $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 object6 var $heading = $(heading);7 8 //retrieve the DOM node out of a jQuery object9 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 keyword7 $("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 event3 });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?");});

Review: JQuery

原文地址:https://www.cnblogs.com/ruruozhenhao/p/9057117.html

知识推荐

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