1.獲取jquery

1.cdn加速---搜尋jquery cnd加速 一般都用百度的
​
2.直接去官網下載
​
3.在控制檯 npm install jquery

2.獲取dom

$(div1)  就等同  const div1=document.getElementById('div1')
  // js dom和jq dom可以相互轉換
 $ 獲取到 dom 時相當於一個數組
 console.log($(div1))//js dom ==>jq dom
 console.log($('#div1')[0])//jq dom==>js dom

3.選擇器

console.log($('.liC'))         class選擇器
console.log($('ul'))            類名選擇器
console.log($('ul>li'))        子代選擇器
console.log($('ul,div'))        並集  
console.log($('#div1 ul'))      後代選擇器
console.log($('#div1+ul'))      相鄰下一個兄弟元素選擇器 親弟 div1後面第一個ul
console.log($('#div1~ul'))     後排兄弟元素選擇器 匹配div1後面所有的ul
 

4.效果

基本效果

$('button').on('click', function () {//點選事件  點選後執行函式
  $('div').show() //顯示
})
​
$('button').on('click', function () {//點選事件  點選後執行函式
  $("div").hide() //剪掉 不顯示
})
​
$('button').on('click', function () {//點選事件  點選後執行函式
  $("div").toggle() //點選顯示 再點選不顯示 再點選又顯示
})

滑動

$('button').on('click', function () {//點選事件  點選後執行函式
  $("div").slideDown() //向下滑動方式 將段落顯示
})
​
$('button').on('click', function () {//點選事件  點選後執行函式
  $("div").slideUp() //向上滑動方式 將段落隱藏
})
​
$('button').on('click', function () {//點選事件  點選後執行函式
  $("div").slideToggle() //點擊向下滑動顯示 再點擊向上滑動隱藏 再點選又向下滑動顯示
})
 

淡入淡出

$('button').on('click',function () {//點選事件  點選後執行函式
  $("div").fadeIn() //淡入網頁
})
​
$('button').on('click',function () {//點選事件  點選後執行函式
  $("div").fadeOut() //淡出網頁
})
​
$('button').on('click',function () {//點選事件  點選後執行函式
  $("div").fadeTo("slow",0.66) //slow以600毫秒的速度  0.66透明度  緩慢的將網頁調整0.66透明度
})
​
$('button').on('click',function () {//點選事件  點選後執行函式
  $("div").fadeToggle() //點選淡出 再點選淡入 再點選再淡出
})
​
$('button').on('click',function () {//點選事件  點選後執行函式
  $("div").fadeTo("slow",0.66) //slow以600毫秒的速度  0.66透明度  緩慢的將網頁調整0.66透明度
})
 

5.事件

ready

這個方法純粹是對向window.load事件註冊事件的替代方法。但是不同的是window.onload這個方法只可以使用一次，ready可以使用無限次

on

on()方法繫結事件處理程式到當前選定的jQuery物件中的元素。

$("p").on("click", function(){
    alert( $(this).text() );    
//對P的進行點選事件的自呼叫 $()中的this是表示誰表用的函式就表示的誰 ，此時是P呼叫的 那麼點選之後現實的就是p的文字
});
​
$('#div1').on('mousedown',function () {1
  console.log('down')
//對當前的div1進行mousedown按下的滑鼠事件，按下後就會在控制檯輸出down                   
})

off

off() 方法移除用.on()繫結的事件處理程式。

$("p").off() 結束對p的用on繫結的事件
​
當有多個事件時
例如：  
    $('#div1').on('mousemove',function () {
    console.log('move')
   })
  $('#div1').on('mousedown',function () {1
    console.log('down')
   })
可以利用$("div1").off("mousemove","mousedown","**") 來選擇關閉哪一個事件

one

當所選內容被第一次點選的時候，呼叫其事件。

$("p").one("click", function(){
  alert( $(this).text() );//當所有段落被第一次點選的時候，顯示所有其文字。
});

hover

當元素獲得焦點時觸發 hover 事件。$("div2").hover(
    function () {
        $('div2').css('background','yellow')
        //滑鼠懸停後 背景變為黃色
    },
);

blur

當元素失去焦點時觸發 blur 事件。

$("input[type='text']").blur( function () { alert("Hello World!"); } );

mousenove

滑鼠指標離開
$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

mo

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

6.CSS

單行樣式

$('#div1').css('color','yellow')//單行css樣式

多行樣式

$('#div1').css({//多行css樣式
    'color':'red',
    'background':'lightblue',
    "width":"100px"
})

7.屬性

html

返回p元素的內容
$('p').html();
設定所有 p 元素的內容
$("p").html("Hello <b>world</b>!");

val

獲取 input中的值
$("input").val();
設定文字框的值
$("input").val("hello world!");

AJAX

$.get

請求 test.php 的網頁 不考慮返回值
$.get("test.php");

請求 test.php 的網頁  併發送兩個引數
$.get("test.php", { name: "John", time: "2pm" } );

請求 test.php 的網頁 並顯示返回值
$.get("test.php", function(data){
          alert("Data Loaded: " + data);
});

$.post

請求 test.php 的網頁 不考慮返回值
$.post("test.php");

請求 test.php 的網頁  併發送兩個引數
$.post("test.php", { name: "John", time: "2pm" } );

請求 test.php 的網頁 並顯示返回值
$.post("test.php", function(data){
          alert("Data Loaded: " + data);
});

###