JQuery basic use, operation style, simple animation

Keywords: Javascript JQuery Attribute

JQ and JS

  • JQ is a plug-in library written by JS, which is a JS file
  • Whatever can be realized by JQ, JS can be realized. What can be realized by JS, JQ may not be realized

Introduce

  • BootCDN: https://www.bootcdn.cn/jquery/
  • Local file import: < script SRC = "JS / JQ. JS" > < script >
  • Online introduction: < script SRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.js" > < script >


Selection element

  • Using selectors to select elements in JQ is the same as using CSS selectors in CSS
  • $("p,span").click(function () { ... });
  • When using within method, select the currently selected element and use this: $(this)

Basic use 1

  • Modify content
    • html()
    • text()
  • jq/js object transformation
    • get()/[]
    • $()
  • Click events
    • Click: click()
    • Double click: dblclick()
  • Mouse in and out: hover()
  • Add content
    • Previous ()
    • After: append()
  • Add tags
    • before()
    • after()
  • Remove value
    • empty()
    • remove()
// Modify content
$("#p1").html("<h1>11</h1>");//html()
$("#p2").text("<h1>12</h1>");//text()

//Converting jq objects to js objects
var p = $('p');
p.get(0).innerHTML=("<h1>21</h1>");//get()
p[1].innerText=("<h1>22</h1>");//[]

// Converting js objects to jq objects
var sp1 = document.getElementsByClassName('sp1');
$(sp1).text("23");//$()

//Single click
$("#p1").click(function () {
    alert("Single click")
});
//double-click
$("#p2").dblclick(function () {
    alert('double-click')
});

// Mouse in and out
$("#p2").hover(function () {
    alert("Mouse slide in")
},function () {
    alert("Mouse slide out")
});

//Add content
var p2 = $("#p2");
p2.prepend("Before==preend==");//prepend()
p2.append("==append==After");//append()

//Add tags
var p1 = $("#p1");
p1.before("<p id='p0'>p1_Front</p>");//before()
p1.after("<p class='p'>p1_after</p>");//after()

//remove
$('#p1').empty(); / / empty the content and label
$('#p2').remove(); / / delete with tag


Basic use II

  • Operational attributes
    • attr()
    • removeAttr()
  • Add / remove value of Class attribute
    • addClass()
    • removeClass()
  • Judgment: hasClass()
  • Indexes
    • each()
    • index()
  • Scroll bar events
    • scroll()
    • scrollTop()
    • scrollLeft()
var div1 = $("#div1");
// Operational attributes
div1.attr("aaa","bbb");
// alert(div1.attr("aaa"));//bbb
div1.removeAttr("aaa");

// Add / remove value of class attribute
div1.addClass("divClass1");
div1.addClass("divClass2");//class="divClass1 divClass2"
div1.removeClass("divClass1");//The class tag is still there, but it has no value

//Determine whether the Class has this value
// alert(div1.hasClass("divClass"));

//Traverse each()
$("ul li").each(function (i) {
    $(this).text("Element subscript:"+i)
});

//Subscript index()
$("li").click(function () {
    alert($(this).index())
});

// Scroll bar events
$(window).scroll(function () {
    console.log("Left:"+$(document).scrollLeft());//From the left
    console.log("Upper:"+$(document).scrollTop());//Off the top
})


Basic use 3

  • Parent element: parent()
  • Child element: children()
  • Brothers: siblings()
  • Offspring: find()
  • Ancestors: parents()
// Find parent element
console.log($("li").parent());
// Find child elements
console.log($("#div1").children());
// Find sibling
console.log($("#p2").siblings());
// Find descendant elements
console.log($("ul").find("li"));//find must give parameter
// Find ancestor elements
console.log($("#li3").parents());


Manipulate CSS Styles

$("..").css({...})
//Set up
$("#div1").css({
    "height":"300px",
    "width":"300px",
    "border":"1px red solid"
});
//Obtain
console.log($("#div1").css("border"));


Simple animation

  • Hide: hide()
  • show()
  • Up: slideUp()
  • Down: slideDown()
  • Negate: slideToggle()
  • Fade in: fadeIn()
  • Fade out: fadeOut()
  • Custom: fadeTo()
  • Reverse: fadeToggle()
  • Animation: animate()
  • Stop: stop()
  • Delay: delay()
// / / display
// $("#btn1").click(function () {
//     $("div1").show(500) / / set animation time
// });
// / / hide
// $("#btn2").click(function () {
//     $("#div1").hide()
// });

// / / upward
// $("#btn1").click(function () {
//     $("div1").slideUp(2000); / / set animation time
//     //Reverse: it will return automatically after upward completion
//     // $("#div1").slideToggle(2000);
//
// });
// / / down
// $("#btn2").click(function () {
//     $("#div1").slideDown();
//     $("div1").slideToggle(500); / / reverse
// });

// / / fade in
// $("#btn1").click(function () {
//     $("div1").fadeIn(1500); / / set animation time
//     $("div1").fadeToggle(500); / / negate
//
// });
// / / fade out
// $("#btn2").click(function () {
//     $("#div1").fadeOut(1500);
// });
// / / custom
// $("#btn3").click(function () {
//     //Parameters: animation time, transparency (0-1)
//     $("#div1").fadeTo(1000,0.3);
// });

//Custom animation
$("#btn1").click(function () {
    //Animation time 3 seconds, delay 3 seconds
    //When finished or stopped, you can continue the animation operation after 3 seconds
    $("#div1").animate({
        width: "600px",
        height: "400px",
        opacity: "0.3"  //transparency
    }, 3000).delay(3000)
});
//Custom animation
$("#btn2").click(function () {
    //Animation time 3 seconds, delay 2 seconds
    //When finished or stopped, you can continue the animation operation after 2 seconds
    $("#div1").animate({
        width: "100px",
        height: "100px",
        opacity: "1"  //transparency
    },3000).delay(2000)
});
// Stop Animation
$("#btn3").click(function () {
    $("#div1").stop();
});




Posted by Frederick on Sat, 14 Dec 2019 12:47:44 -0800