JQuery

IDEA导入JQUery
https://blog.csdn.net/qq_35767233/article/details/86535107
$\color{red}{\large\text{JQyery}}$

1.文档加载

等文档加载完在执行JQuery代码

1.$( function(){} );

2.$(document).ready( function(){} );

2.图片加载

<script>
$(function(){
    $("#img").load(function(){
      $("#message2").html("图片加载成功");
    });
  });
</script>
<div id="message2"></div>
 
<img id="img" src="https://how2j.cn/example.gif">

类型转换

（1）JQuery转Dom

通过get()或者[0] 把JQuery对象转为DOM对象

var div = $("#d");
$("#d").get()
$("#d")[0]

(2)DOM转JQuery

通过$();

 var div= document.getElementById("d");
$(div);

$\color{red}{\large\text{元素操作}}$

1.获取ID$("#id")

<script >
 
$(function(){
  document.write( $("#d") );
  document.close();
});
 
</script>
 
<div id="d">Hello JQuery</div>

2.获取节点值val();

通过JQuery对象的val()方法获取值
相当于 document.getElementById("input1").value;

<script>
    $(function () {
            $("#button").click(function () {  //相当于onlick事件
                alert($("#input").val());  //取值
            });
    });

</script>
<button id="button">取值</button>
<input id="input">

3.获取节点内容html();

<script>
    $(function () {
            $("#button").click(function () {
                alert($("#div").html());
            });
    });

</script>
<button id="button">获取内容</button>
<div id="div">
我是div
<p>我是p标签<p>
</div>

获取内容时会把所有标签节点，内容获取运行结果

我是div
<p>我是p标签<p>

4.获取节点文本text();

与获取节点内容不同，此方法只会获取文本信息运行结果如下

我是div

我是p标签

5节点属性

（1）获取属性attr()

<script>
    $(function(){
        alert("align属性是:" + $("#h").attr("align") );
    });

</script>
<h1 id="h" align="center">居中标题</h1>

（2）修改属性attr(attr,value)

<script>
    $(function(){
        alert("align属性是:" + $("#h").attr("align","right") );
    });

</script>
<h1 id="h" align="center">居中标题</h1>

(3)删除属性removeAttr(attr)

<script>
   $(function(){
       alert("align属性是:" + $("#h").removeAttr("align") );
   });

</script>
<h1 id="h" align="center">居中标题</h1>

（4）表单属性获取prop()

<script>
    $(function(){
            alert("checked属性是:" + $("#c").prop("checked") );
    });
</script>
<input type="checkbox"  id="c" game="LOL" checked="checked"> 选中的复选框

prop()同样可以获取属性但是不能获取自定义属性
attr()不能选取表单中改变的值但可以选取自定义属性

6this代表当前节点

<script>
$(function(){
   $("#b1").click(function(){
     $(this).hide();
   });
    
});
</script>
  
<button id="b1">点击隐藏</button>

this=='b1'

$\color{red}{\large\text{CSS}}$

1.添加css

addclass() 获取ID后调用addclass()方法

<script>
    $(function () {
            $("#button").click(function () {
                $("#div").addClass("divstyle");
            });
    });

</script>
<button id="button">增加css</button>
<div id="div">我是div
</div>

<style>
    .divstyle{
        background-color: blue;
        width: 500px;
        height: 500px;
    }
</style>

2.删除css

removeClass() 获取ID后调用removeClass() 方法

<script>
    $(function () {
            $("#button").click(function () {
                $("#div").removeClass("divstyle");
            });
    });

</script>
<button id="button">删除css</button>
<div id="div" class="divstyle">我是div
</div>

<style>
    .divstyle{
        background-color: blue;
        width: 500px;
        height: 500px;
    }
</style>

3切换css

toggleClass() 获取ID后调用toggleClass() 方法

通过toggleClass() 切换一个样式中的class
这里的切换，指得是：
如果存在就删除
如果不存在，就添加

4css函数

（1）单一属性css(property,value)不加大括号

 $("#div").css(
                "background-color", "blue"
            );

(2)多种属性

参数是 {} 包含的属性值对。
属性值对之间用逗号，分割
属性值之间用冒号：分割
属性和值都需要用引号 “

<script>
    $(function () {
        $("#button").click(function () {
            $("#div").css(
                {
                    "background-color": "blue",
                    "width": "500px",
                    "height": "500px"
                });
        });
    });

</script>
<button id="button">删除css</button>
<div id="div">
    我是div
</div>

$\color{red}{\large\text{选择器}}$

1.类选择器$("div")

2.id选择器$("#d1")

3.class选择器$(".d")

4.交集选择器$("selector1selector2")

$("div#d")既是div又是 id为d的标签

$("div.d")既是div又是 class为d的标签

5.层级选择器$("selector1 selector2")

$("div p")div下的p标签标签

6.特殊选择

（1）先后选择$("selector:first/last") 满足选择器的第一个/最后一个元素

（2）奇偶选择$("selector:odd/even") 满足选择器的奇数/偶数个元素

（3）可见选择$("selector:hidden/visible") 满足选择器的可见/隐藏元素

注意：
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素不是div本身

（4）属性选择$("selector[attribute]") 满足选择器的有此属性的

$(selector["attribute=value"]) 满足选择器条件的属性等于value的元素
$(selector["attribute!=value"]) 满足选择器条件的属性不等于value的元素
$(selector['attribute^=value"]) 满足选择器条件的属性以value开头的元素
$(selector["attribute$=value"]) 满足选择器条件的属性以value结尾的元素
$(selector["attribute*=value"]) 满足选择器条件的属性包含value的元素

(5) 表单元素选择$("selector:input")满足选择器的input元素

:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮

(6) 表单元素属性选择$("selector:enabled")满足选择器的input元素中可用的标签

:enabled会选择可用的输入元素注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素

$\color{red}{\large\text{筛选器}}$
筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。

1先后选择器

（1）第一个first()

$("#b1").click(function(){
      $("div").first().toggleClass("pink");//第一个div元素
   });

（2）最后一个last()

$("#b2").click(function(){
      $("div").last().toggleClass("pink");
   });

（3）第几个eq(num)

$("#b3").click(function(){
      $("div").eq(4).toggleClass("pink");
   });

2父选择器

（1）父选择parent()

$("#b1").click(function(){
     $("#currentDiv").parent();//选择父元素
  });

（2）祖先选择parents()

$("#b2").click(function(){
     $("#currentDiv").parents();//选取所有祖先
  });

3子孙选择器

(1)子选择器children()

$("#b1").click(function(){
     $("#currentDiv").children();// 子选择 可以多个
  });

(1)孙选择器find(selector)

必须指定孙的类型

$("#b2").click(function(){
     $("#currentDiv").find("div");  //选取所有孙元素
  });

4同级选择器

同级选择siblings():

$("#b1").click(function(){
     $("#currentDiv").siblings();
  });

$\color{red}{\large\text{效果}}$

显示/隐藏

(1)显示show()

$("#b1").click(function(){
      div.show();

      div.show(1000);延时显示
   });

(2)隐藏hide()

$("#b1").click(function(){
      div.hide();

      div.hide(1000);延时隐藏
   });

(3)切换toggle()

$("#b1").click(function(){
      div.toggle();

      div.toggle(1000);延时切换
   });

滑动

(1) 向上滑动slideUp()

$("#b1").click(function(){
      div.slideUp();

      div.slideUp(1000);延时 向上滑动
   });

(2) 向下滑动slideDown()

$("#b1").click(function(){
      div.slideDown();

      div.slideDown(1000);延时 向下滑动
   });

(3) 切换滑动slideToggle()

$("#b1").click(function(){
      div.slideToggle();

      div.slideToggle(1000);延时 切换滑动
   });

淡入/淡出

(1)淡入fadeIn()

$("#b1").click(function(){
      div.fadeIn();

      div.fadeIn(1000);延时 淡入
   });

(2)淡出fadeOut()

$("#b1").click(function(){
      div.fadeOut();

      div.fadeOut(1000);延时 淡出
   });

(3)切换淡入淡出fadeToggle()

$("#b1").click(function(){
      div.ffadeToggle();

      div.fadeToggle(1000);延时切换淡入淡出
   });

(3)半淡出fadeTo()()

$("#b1").click(function(){
      div.fadeTo(1);不淡出
      div.fadeTo(0.5);半淡出
      div.fadeTo(0);全部淡出
   });

自定义动画

animate（css，延时毫秒数）

<script>
    $(function(){
        var div = $("#d");
        $("#b1").click(function(){
            div.animate({left:'100px'},2000);
            div.animate({left:'0px',top:'50px',height:'50px'},2000);
        });
    });

</script>

回调函数

在动画函数里加function（）当动画执行完自动执行回调函数

$("#b1").click(function(){
            div.hide(function () {
                alert("执行完毕");
            });
        });

$\color{red}{\large\text{事件}}$

单击和双击

click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件

<script>
  $(function(){
      $("#b").click(function(){
          $("#message").html("单击按钮");
      });
      $("#b").dblclick(function(){
          $("#message").html("双击按钮");
      });
  });
</script>
   
<div id="message"></div>
 
<button id="b">测试单击和双击</button>

键盘事件

keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
先后顺序：按照 keydown keypress keyup 顺序发生
键盘按钮值：keydown和keyup 能获取所有按键，不能识别大小写
keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
文本取值：keydown和keypress：不能获取最后一个字符
keyup：获取所有字符

<body>
<input id="input">
<div id="div"></div>

</body>
<script>
    $(function () {
        $("#input").keydown(function (e) {
           $("div").html(e.which);//获取输入字符的ascll码
           $("div").html($(this).val());//获取值
        });
    });
</script>

鼠标事件

mousedown 表示鼠标按下
mouseup表示鼠标弹起
mousemove ：当鼠标进入元素，每移动一下都会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
mouseover ：当鼠标进入元素，调用一下，在其中移动，不调用，当鼠标经过其子元素会被调用
mouseleave：当鼠标退出元素，调用一下，在其中移动，不调用
mouseout：当鼠标退出元素，调用一下，在其中移动，不调用当鼠标退出其子元素会被调用

<body>
<div id="div">
    <div id="div2"><span></span></div>
    </div>

</body>
<script>
    var num = 0;
    $(function () {
        $("#div").mouseout(function () {
            $("#div #div2 span").html(num++);
        });
    });
</script>

焦点事件

focus() 获取焦点
blur() 失去焦点

<script>
    $(function(){
        $("input").focus(function(){
            $(this).val("获取了焦点");
        });

        $("input").blur(function(){
            $(this).val("失去了焦点");
        });

    });

</script>
<input type="text" >

改变事件

change() 内容改变

提交事件

submit() 提交form表单

<body>
<form id="form">
    账号 : <input name="name" type=""> <br>
    密码: <input name="password" type=""><br>
    <input type="submit" value="登陆">
</form>

<script>
    $(function () {

        $("#form").submit(function () {
            alert("提交账号密码");
        });
    });
</script>

绑定事件

通过绑定不需要重复写事件

 $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });

触发事件

自动执行某事件
例如文档加载好之后，就触发dblclick双击事件，而不是通过去手动

<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });
     $("#b").trigger("dblclick");
  });
</script>

$\color{red}{\large\text{AJAX}}$

提交AJAX

第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数

 var page = "https://how2j.cn/study/checkName.jsp";
 var value = $(this).val();
 $.ajax({
            url: page,  
            data:{"name":value},
            success: function(result){
              $("#checkResult").html(result);
            }
        });

get方式

只有第一个参数是必须的，其他参数都是可选

 var page = "https://how2j.cn/study/checkName.jsp";
 var value = $(this).val();
 $.get({
            page,  
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        });

post方式

同get方式只不过post可以提交二进制文件

最简单的方式

通过load（）方法讲url+date连接在一起发送，返回success函数值

$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});

格式化方式提交

当提交的数据多时可以用serialize() 把输入数据格式化成字符串统一提交

<form id="form">   
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
     
</form>
 
<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "https://how2j.cn/study/checkName.jsp";
      var link = url+"?"+ data;//统一提交
   });
});

$\color{red}{\large\text{对象操作}}$

1.数组

(1)遍历

$.each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标，n是内容


<script>
    var a = new Array(1,2,3);
    $.each( a, function(i, n){
        document.write( "元素[" + i + "] : " + n + "<br>" );
    })
    document.close();

</script>

(2)去除重复

<script>
var a = new Array(5,2,4,2,3,3,1,4,2,5);
a.sort();
$.unique(a);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();
  
</script>

(3)是否存在

-1不存在 0存在

<script>
    var a = new Array(1,2,3,4,5,6,7,8);
    document.write($.inArray(1,a));
    document.close();
</script>

字符串

(1)去除空白

<script>
 
document.write($.trim(" Hello JQuery    "));
document.close();
   
</script>