jquery笔记

 

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

###