基础

前言

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

Jquery==$

JQuery初体验

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <span></span>
   
    <nav>
        <a href="#">地区1</a>
        <a href="#">地区2</a>
        <a href="#">地区3</a>
        <a href="#">地区4</a>
        <a href="#">地区5</a>
        <a href="#">地区6</a>
        <a href="#">地区7</a>
        
    </nav>
    
    
    <div class="show">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>

    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/script.js"></script>
</body>
</html>

css

*{padding:0;margin:0;border: none;}

body{
    height: 100%;
    background-color: #93b3c6;
    overflow: hidden;
}

span{
    display:block;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    margin:15px auto 20px;
}

nav{
    position: relative;
    display:flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;   
    z-index: 999999;
}
nav::before{
    position: absolute;
    top: 50px;
    width: 80%;
    height: 10px;
    display: block;
    background: #ffffff;
    content: '';

}

nav>a{
    position: relative;
    display: block;
    list-style: none;
    text-decoration: none;
    color:black;
    margin: 20px 5px;
    max-width: 10%;
    min-width: 5%;
    padding: 15px 25px 10px 25px;
    height: 40px;
    text-align: center;
    background-color: white;
    border: 2px solid #5395b4;
    padding:10px;
}

nav::after{
    margin-right: auto;
}


.show{
    position: relative;
    width: 78.125vw;
    height: 75vh;
    margin: 5px auto;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 0 30px 0 rgba(8, 1, 3,.3);
    padding: 10px;
}

.show>div{
    font-size: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 98%;
    height: 98%;
    margin: auto;
    background-color: #93b3c6;
}

js

$(document).ready(function () {
    $('a').click(function () {
        $('.show>div')
            .eq($(this).index()).css({
                'opacity': '1'
            }) //设置当前节点元素的透明度
            .siblings().css({
                'opacity': '0'
            }); //修改兄弟节点的透明度

        console.log($(this).index());
    })


    var alinks = $('a');
    for(var i = alinks.length - 1; i>=0; i--){
        // alinks[i].style.background = 'red';
        console.log(alinks);
        alinks.eq(i).css({//这里不可以是alinks[i]
            'background': 'red',//插入css
        })
        // .text('index'+i)//插入text
        // .html('<strong>地区'+i+"</stong>")//插入html标签
    }

});

基础选择性器

id , class , 标签,

	//类似css的选择器
	$("*")		全，
  $("p")		标签
  $("#test")		id,
  $(".style01")		类,
  $("p,h2")多选,
  $("[属性]"),
    $("[attribute]")
		$("[attribute=value]")
		$("[attribute!=value]")
		$("[attribute^=value]")//选择包含属性开头
		$("[attribute$=value]")//选择包含这个属性结尾
		$("[attribute*=value]")//包含这个属性
  $(":input")表单选择器,
  $("parent->child")层次选择器,
  $("ancestor descendant")后代选择器,
  $("prev+next")后相邻选择器(就是选择prev后一个元素),
  $("prev~siblings")后兄弟选择器(prev后所有符合条件的元素)

CSS选择器

S(selector).css(propertyName, value)[修改当前元素的css属性]

过滤器

用法$("selector:first")

父元素过滤器

:first第一个

:last最后一个

:even偶数

:odd奇数

:eq(index)选择指定序号

:gt(index)选择大于指定序号的元素

:lt(index)选择小于指定序号的元素

:not(selector)除了selector都要选择$(":not(selector)")

:header选择标题元素(就是h标签)$(":header")

子元素过滤器

:first-child

:last-child

:nth-child():选择第n个子元素

:nth-last-child():选择倒数第n个子元素

:only-child选择唯一的子元素

内容过滤器

:contains(str):选择内容含有str的元素

:empty:选择元素内容为空的

:parent:选择拥有子节点的

:has():选择包含指定选择器

可见性过滤器

:hidden不可见元素

:visible可见元素

事件

常用事件

$(selector).action(function(){.......});

常见文档/窗口事件

ready()就绪

load()加载

unload()卸载(跳到其他页面)

键盘事件

keydown()按下

keypress()按下并快速释放

keyup()释放

鼠标事件

click()

dbclick()

hover()

mousedown()

mouseenter()鼠标刚进入被选中元素

mouseleave()鼠标刚离开被选中元素

mousemove()鼠标移动事件

mouseout()离开(离开子元素也会触发)

mouseover()穿过

mouseup()鼠标按键被释放事件

toggle()一次绑定多个函数,指定元素被点击依次执行其中一个函数

$(selector).toggle(function(){},function(){},function(){}....);

JQuery事件绑定解除

事件绑定

bind()可以给指定元素绑定一个或多个事件

//绑定一个事件
$(selector).bind(event(事件名称),[data,] function(){})  
//可以绑定多个事件 
$(selector).bind(event1(事件名称) event2(事件名称) event3(事件名称),[data,] function(){})  
//可以绑定多个事件和方法
$(selector).bind({
    event1(事件名称),[data,] function(){},    	
    event2(事件名称),[data,] function(){},    
    event3(事件名称),[data,] function(){}}
  )

delegate():给指定元素的子元素绑定一个或多个事件

$(selector).delegate(childSelector, event, [data,] function)

==on():给指定元素或子元素绑定一个或多个事件(包含前两个的用法)==

$(selector).on(event,[childSelector,] [data,] function)

事件解除

//unbind()

$(selector).unbind([event] [,function]) 

//undelegate

$(selector).undelegate([childSelector] [,event] [,function]) 

//off()

$(selector).off(event, [childSelector,] [data,] function)

jQuery特效

隐藏和显示

hide()

show()

toggle()用来切换hide和show

淡入和淡出

【duration可以选择slow，fast】

fadeIn():淡入

fadeOut():淡出直到隐藏

fadeToggle():切换淡入和淡出

fadeTo():用于将元素变成指定通明度

$(selector).fadeTo(duration(持续时间), opacity(通明度) [, callback])

滑动

slideDown():向下滑动

slideUp():向上滑动

slideToggle():切换向上向下滑动

动画

animate({params} [,duration], [,callback])

params是形成动画的css属性(可以设置多个)

duration:表示规定的效果时长

callback:动画结束后执行的函数

方法链接

$(selector).action1(),action2().action3()...;

停止动画

$(selector).stop([stopAll] [, gotoEnd]);//这两个都是布尔值

jQuery HTML DOM

jQuery获取和设置

获取和设置常用的方法

text():文本内容

html():包括html标签本身

val():表单字段的值

attr():指定元素的属性值

css():指定元素的css值

jQuery添加

append():在指定元素内部的结尾插入内容

prepend():在只当以元素的内部的开头插入内容

after():在指定元素之后添加内容

before():在指定元素之前添加内容

删除remove();

$("p").remove(".style01");//删除class="style01"所有的p标签

清空empty();

清空removeAttr();

删除元素的指定属性

类属性

addClass()//添加class
removeClass()
toggleClass()

尺寸

width:

height

innerWidth包括内边距

innerHeight

outerWidth包括内边距和边框

outerHeight

jQuery遍历

后代遍历

$(selector).children([selector2] [".style1"])

$(selector).find(selector2)//查找后代全部元素

$(selector).filter(selector2)//过滤器,只会选择符合selector2的元素

同胞遍历(具有相同的父元素)

siblings:所有兄弟节点

next:指定的下一个

nextAll:指定元素后全部

nextUntil(selector,selector):指定元素后的指定范围

prev:指定的前一个

prevAll:指定前全部

prevUntil(selector,selector):指定元素前的指定范围

祖先遍历(父,祖父,曾祖父等)

parent():指定元素的直接父元素

parents():指定元素的全部祖先元素

parentsUntil():指定元素向上指定范围的所有祖先元素

AJAX技术

load()方法

$(selector).load(URL [, data] [, callback])

URL规定获取数据的URL地址,可以是文本,XML,JSON

data:用于规定与请求一起发送给服务器的字符串(该字符串以键/值对合集)

callback:load()完成后执行的函数

$("#demo").load("test.txt")

$("#demo").load("test.txt div.style01")

$(selector).load(URL [, data] ,function(response, status,xhr){    
  //回调函数代码    
  //response:调用成功时的结果内容    
  //status:调用状态,eg:success 和 error    
  //xhr:表示XMLHttpRequest对象 
})

get()方法

$.get(URL [, data] [, success] [, dataType]);

dataType规定从服务器端获取的数据类型,eg:XML,JSON,HTML等

post()方法

$.post(URL [, data] [, success] [, dataType]);

ajax()方法

$.ajax({    
  url: "demo.php",    
  method:"POST",    
  data:{username:"admin", password:"123"},    
  dataType: "json",    
  success:function(){alert("请求成功");},    
  error: function(){alert("请求失败");} 
});

JQuery基础

基础

前言

JQuery初体验

html

css

js

基础选择性器

CSS选择器

过滤器

父元素过滤器

子元素过滤器

内容过滤器

可见性过滤器

事件

常用事件

常见文档/窗口事件

键盘事件

鼠标事件

JQuery事件绑定 解除

事件绑定

事件解除

jQuery特效

隐藏和显示

淡入和淡出

滑动

动画

方法链接

停止动画

jQuery HTML DOM

jQuery获取和设置

获取和设置常用的方法

jQuery添加

删除remove();

清空empty();

清空removeAttr();

类属性

尺寸

jQuery遍历

AJAX技术

load()方法

get()方法

post()方法

ajax()方法

JQuery事件绑定解除