Viewing: raw.githubusercontent.com

[ Web Proxy ]

Viewing: https://raw.githubusercontent.com/We2one/Notes/master/python-basic-notes/python-days/Day_31.md

### jQuery #### 1.jQuery + jQuery JavaScript , JavaScript + : AJAX + jQuery JS , script src js 1. CDN jQuery ``` ``` 2. jQuery ``` npm install jquery ``` #### 2.jQuery + jQuery .css HTML , + | | | | ------------------ | ------------------------------------------------------------ | | id | `$("#div").css("background", "red").css("width", 100)...;` | | | `$(".div").css("background", "red").css("width", 100)...;` | | | `$("div").css("background", "red").css("width", 100)...;` | | | `$("[name]").css("background", "red").css("width", 100)...;`
`$("[name = 'nice']").css("background", "red").css("width", 100)...;`
`$("[name != 'nice']").css("background", "red").css("width", 100)...;` | | | `$("#div p").css("background", "red").css("width", 100)...;` | | | `$("#div>p").css("background", "red").css("width", 100)...;` | | | `$("#div,.div").css("background", "red").css("width", 100)...;` | | first last | `$("div:first").css("background", "red").css("width", 100)...;`
`$("div:last").css("background", "red").css("width", 100)...;` | | eq | `$("div:eq(2)").css("background", "red").css("width", 100)...;` | #### 3.jQuery ##### 3.1 jQuery | | | | ------------------------ | -------------------------------------- | | | `var children = $("#div").children();` | | | `var prev = $("#div").prev();` | | | `var next = $("#div").next();` | | | `var siblings = $("#div").siblings();` | | | `var parent = $("#div").parent();` | | | `var parents = $("#div").parents();` | ##### 3.2 jQuery 1. `.css()` : CSS 1. CSS ,, ``` var width = $("#box").css("width") ``` 2. CSS ,, ``` $("#box").css("width", 100) ``` 3. CSS ``` $("#box").css({"width": "100px", "height": "100px", "background-color": "red", "border": "1px solid black" }) ``` 2. `.addClass()`,`.removeClass()`,`.toggleClass()` : class 1. ``` $("#box").addClass("div div1"); ``` 2. ``` $("#box").removeClass("div1"); ``` 3. , ``` $("#box").toggleClass("div div1"); ``` ##### 3.3 jQuery 1. `.attr()` : 1. ``` $("#box").attr("class"); ``` 2. ``` $("#box").css("class", "div div1"); ``` 3. ``` $("#box").attr({ "class": "div div1", "nice": "nice work" }) ``` 2. `removeattr()` : ``` $("#box").removeattr("nice"); ``` ##### 3.4 1. `.html()` : HTML ``` // HTML var html = $("#box").html() // HTML $("#box").html( "

" ) ``` 2. `.text()` : TEXT ``` // Text var text = $("#box").text() // Text $("#box").html( "

" ) ``` 3. `.val()` : input val ``` $("#input").val("hello") ``` #### 4. 1. ``` var width = $("#box").width(); var height = $("#box").height(); ``` 2. ``` var offset = $("#box").offset(); // offset // offset.top // offset.left ``` #### 5. ##### 5.1 1. `.hide()`,`.show()`,`.toggle()` : ```js

``` 2. jQuery fast(),slow(),normal(), ```js $("#box") .width("slow") .height("fast") ``` 3. `.fadeln()`,`.fadeOut()`,`fadeToggle()` : ```js

``` ##### 5.2 1. `.animate()` : + : `$(selector).animate(styles, speed, easing, callback)` + | | | | -------- | ------------------------------------------------------------ | | styles | CSS | | speed | "normal""fast","slow" | | easing | easing easing : swing linear | | callback | animate , | 2. `.ready()` : ```js

``` 3. `.stop()` : ```js

``` 4. `.delay()` : ```js

``` #### 6. + + on + "=" "()" + jQuery JS + JS ```js var div = document.getElementById("box"); div.onclick = function() {} ``` + jQuery ```js var div = $("#box"); div.click(function() {}) ``` + jQuery | | | | ------- | ------------ | | blur | | | focus | | | submit | | | change | | | keydown | | | keyup | | + | | | | --------- | ------------------ | | click | | | mouseover | | | mousemove | | | mouseout | | | mousedown | | | mouseup | | #### 7.jQuery ##### 7.1 + ``` var $div = $('

'); var $div2 = $('

div

'); ``` ##### 7.2 1. `.append()` : , ```js

``` 2. `.prepend()` : , 3. `.after()` : , 4. `.before()` : , ##### 7.3 1. `$(element).remove()` : 2. `$(element).clear()` : ##### 7.4 + `$(element).clone(true)` :

Web Proxy Viewer | New URL | Original Page