JQuery库

image.png

认识JQuery

官网地址

1. jQuery是什么：jQuery是JavaScript的一个函数库，十分方便。
2. jQuery对象和DOM对象关系：jQuery对象是使用$()包装DOM对象后产生的对象。

1）、jQuery对象不能使用DOM对象的属性和方法。
2）、jQuery对象是一个DOM数组对象。
3）、之间的相互转换。

第一：jQuery对象转成DOM对象
Var $button = $(“button”);  // jQuery对象
Var but = $button[0];&Var but = $button.get(0);  // DOM对象
第二：DOM对象转换成jQuery对象
var oDiv = document.getElementById("app");  // DOM对象
var $oDiv = $(oDiv);  // jQuery对象

3. JQuery代码编写

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        alert($("#app").html());
    });
    $().ready(function() {
        alert($("#app").html());
    });
    $(function() {
        alert($("#app").html());
    });
</script>

4. JQuery多库并存

<script src="https://cdn.bootcss.com/prototype/1.7.3/prototype.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    jQuery.noConflict();  // 将变量$的控制权移交给prototype.js
    jQuery(document).ready(function() {  // 使用jQuery
        alert(jQuery("#app").html());
    });
    jQuery().ready(function() {
        alert(jQuery("#app").html());
    });
    jQuery(function() {
        alert(jQuery("#app").html());
    });
</script>

jQuery选择器（重点）

常用操作

找对象

父级元素：（parent、parents、.closest）
同级元素：（next、nextAll、prev、prevAll）
子元素：（children、find）注意里面的参数是元素的名称。

属性操作

Val：（用来读取或修改表单元素的value值）；
Attr：（attr()用于自定义属性，attr所指的属性是HTML标签属性；在javascript中使用getAttribute、setAttribute）；
Text：（用来读取或修改元素的纯文本内容；在javascript中使用innerText）；
Prop：（prop用于固有属性。prop()最常见的用法就是选中所有复选框、取消选中所有复选框、反选）
Html：（用为读取和修改元素的HTML标签；在javascript中使用innerHTML）方法的区别和使用？

总结：对标签内的属性使用attr来读取和设置；对DOM对象固有的一些属性，使用prop读取和设置。

元素隐藏

type= "hidden"
style= "display: none"
style= " visibility: hidden"

区别：隐藏后是否还占用的页面空间。

处于不可点击状态

readonly是文本框处于不可点击状态，但是可以提交value值。
disabled是文本框处于不可点击状态，但是不可以提交value值。

区别

jQuery中prop和attr的区别