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();
});