JQ DOM 新手必备知识（Java修仙体系结丹境）

JQ DOM

JQ的DOM，其实和JS的DOM没有多大的区别

在获取这一块，我们只要用选择器就好了。

JQ的DOM能完成一些比较复杂的操作，可以让用户体验更加流程，并且不需要太多的代码就可以完成。

我们从四个方面开始说

内容操作
属性操作
效果
事件

// 内容操作，就是获取元素里面的一些内容，下面举个栗子
$("#hentai").html();	// 获取/设置 包含ID值为hentai的元素的标签体中的内容，注意，是整个标签体包含的内容！！！如果里面写入值了，就是进行设置
text();	// 获取/设置元素标签体中的纯文本内容，text()和html()大家可以自行去对比一下
val();	// 获取/设置元素的value属性值，()为空则是获取，反正则是设置

属性操作

有一点需要说明，建议先看完底下的操作，在上来看这个

关于属性操作的建议
一、
如果是对API自带的属性进行操作，建议使用prop
如果是我们自定义的属性进行操作，建议使用attr，因为prop不能获取自定义属性

二、
对于选中属性，选中属性就是 checked、select等这些选中的属性

attr只能获取初始值，就是我们一开始设置的值，而且无论用户怎么操作，其获取的值永远只是初始值

prop可以获取用户进行操作后变动的值，并且以 true/false 返回，因为是选中属性嘛，无非就是 选中/没选中

所以在访问表单对象属性的时候，应该采用prop而非attr

$("#hentai").attr("属性名称","要设置的值");	// 这个方法可以 获取/设置 标签的属性值，()为空则是获取，反正设置

removeAttr("属性名称");	// 移除属性。

prop("属性名称","要设置的值");	// 这个方法和attr一样，只是有点区别而已，等全部看完了，看我上面写的

removeProp("属性名称");	// 嗯嗯，和上面一样

// 对于 class属性 的操作
$("#hentai").addClass("class名称");	// 这个方法可以用来添加class，注意是添加class名称，而不是直接添加class里面的css样式，不要搞混了

removeClass("class名称");	// 这个方法用来移除class

toggleClass("class名称");	// 这个方法用来切换class属性，判断如果元素对象上存在这个 class名称 ，有则将属性值 one 删除，否则增加

$("#d2").css({"background-color":"pink","color":"green"});	// 设置class属性，()里面需要加{}，用:表示键值对， , 号隔开

---

效果操作，就是如题，效果操作，注意，隐藏之后的区域会被其他的元素填充！！！

$("#hentai").show(MSecond);	// 立即隐藏/延迟隐藏，单位是 秒，让你选择的元素隐藏
show(MSecond);	// 立即显示/延迟显示，单位是 秒，就是让你选择的元素出现而已，跟上面那个相对应
toggle(MSecond);	// 立即切换/延迟切换，单位 秒，点击隐藏否则显示，参考 toggleClass();

slideUp(MSecond);	// 立即向上滑动/延迟向上滑动，不说单位了，这个就是动态的隐藏，而且可以控制方式以动画形式隐藏，自己去试试
slideDown(MSecond);	// 立即向下滑动/延迟向下滑动，动态的隐藏？//
slideToggle(MSecond);	// 切换呗，自己去试试

fadeIn(MSecond);	// 淡入效果，就是将你选择的元素慢慢隐藏，从中心触发
fadeOut(MSecond);	// 淡出效果，自己悟
fadeToggle(MSecond);	// 嗯嗯，就是你想的那样
fadeTo("slow/normal/fast",0-1);	// 第一参数，设置速度 慢/中/快，第二参数，设置淡出程度，0-1之间取值，小数整数都可以

// 示例：
$("#hentai").fadeTo("slow",0.1);	// 淡出速度很慢，且几乎看不见

---

自定义动画，这个部分比较麻烦

需要预先将要获取的元素的 position的值设置为 relative | absolute | fixed

我们可以设置class的上下左右位置，就可以看到具体的效果了，左右摆动，很好玩

animate({css样式},MSecond,回调函数);	// 设置CSS样式并挨个执行{color:'red',...}，结束之后执行函数体中的内容【回调函数】
// 例子，大家自己去看看：
$("#h1").animate({left:'100px',top:'100px',height:'100px'},2000,function(){
      alert("嗯嗯嗷嗷");
});

// 又到了我们最爱的事件环节，嗷嗷！！
click();	// 单击事件，不多解释
dblclick();	// 双击事件，就是字面意思
mouseover();	// 鼠标移入事件
mouseout();	// 鼠标移出事件
bind("事件1 事件2 ...",函数);	// 一次性绑定多个事件，最后执行回调函数，不过这玩意儿好像被弃用了，看底下的on()方法把
unbind();	// 解除事件，不给值则全部解绑，获取值，直接用event参数即可
on("事件1 事件2 ...",函数);	// 最好用 on 方法来绑定多个事件

// 例子
// 获取事件
$(function (){
    $("div").on("mousemove mouseover",function (event){
    	console.log(event);
    });
})
// 进行判断单独完成事件
$(function (){
    $("div").on("mousemove mouseover",function (event){
        if(event.type === "mousemove"){
            console.log(event)
        }
    });
})

⭐事件冒泡及阻止⭐

冒泡：当用户设置事件时，触发了子元素后，所有在其上面的元素都会被触发
阻止：在定义回调函数时写入 return false; 即可

如果这篇文章对你有用的话，记得点个赞哦！

修仙永无止境。