image.png
认识JQuery
- jQuery是什么：jQuery是JavaScript的一个函数库，十分方便。
- 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对象
- 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>
- 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值。
