通过jQuery操作DOM
1、属性操作
①attr()方法
attr()方法用于获取所匹配元素集合中第一个元素的属性，也可以用来设置所匹配元素的一个或多个属性值，attr()方法有如下所示的4种语法格式。
attr(name);//获取元素的属性值 attr(name,value);//设置元素的某个属性的值 attr({name1,value1,name2,value2,....});//设置元素的多个属性的值 attr(name.function([index,oldArrt]));//用函数返回值设置元素的属性
②removeAttr()方法
removeattr()方法用于测试匹配元素的指定属性,其语法格式如下。
removeAttr(name);
③prop()方法
用于获取所匹配元素集合中第一个元素的属性，也可以用来设置所匹配元素的一个或多个属性值。多用于boolean类型的属性操作，如checked、selected、disabled等。
如：$("input [ type='checkbox']").prop("checked");
④removeProp()方法
removeProp(name);
2、样式操作
①addClass()方法
addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
$(selector).addClass(class) //使用函数向被选元素添加类。 $(selector).addClass(function(index,oldclass))
②removeClass()方法
从被选元素移除一个或多个类。
$(selector).removeClass(class)
③toggleClass()方法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
toggleClass(classname); $(selector).toggleClass(class,switch);
//使用函数来切换类
$(selector).toggleClass(function(index,class),switch)
④css()方法
css() 方法返回或设置匹配的元素的一个或多个样式属性。
//返回 CSS 属性值 $(selector).css(name); //设置 CSS 属性 $(selector).css(name,value); //使用函数来设置 CSS 属性 $(selector).css(name,function(index,value)); //设置多个 CSS 属性/值对 $(selector).css({property:value, property:value, ...});
3、内容操作（来自w3cschool）
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| after() | 在匹配的元素之后插入内容。 |
| append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
| appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| before() | 在每个匹配的元素之前插入内容。 |
| clone() | 创建匹配元素集合的副本。 |
| detach() | 从 DOM 中移除匹配元素集合。 |
| empty() | 删除匹配的元素集合中所有的子节点。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每个元素开头插入由参数指定的内容。 |
| prependTo() | 向目标开头插入匹配元素集合中的每个元素。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| replaceAll() | 用匹配的元素替换所有匹配到的元素。 |
| replaceWith() | 用新内容替换匹配的元素。 |
| text() | 设置或返回匹配元素的内容。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| unwrap() | 移除并替换指定元素的父元素。 |
| val() | 设置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
| wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 |
| wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
4、常用特效方法
（1）隐藏/显示
$(selector).show(speed,callback);//显示html元素
$(selector).toggle(speed,callback);//可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
（2）淡入淡出
$(selector).fadeOut(speed,callback);//用于淡出可见元素。
$(selector).fadeToggle(speed,callback);//如果元素已淡出/淡入，则 fadeToggle() 会向元素添加淡入/淡出效果。
$(selector).fadeTo(speed,opacity,callback
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
$(selector).slideDown(speed,callback
$(selector).slideUp(speed,callback);//用于向上滑动元素。
$(selector).slideToggle(speed,callback);//可以在 slideDown() 与 slideUp() 方法之间进行切换。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
（4）动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
示例：
//代码来自菜鸟教程 $("div").animate({ left:'250px', opacity:'0.5', height:'+=150px',//使用相对值 }); //使用预定值 $("div").animate({ height:'toggle' }); //使用队列功能 var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({'100px',opacity:'0.8'},"slow");
（5）停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
（6）方法链接
//代码来自菜鸟教程 $("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
5、cookie的使用
https://account.cnblogs.com/signin?returnUrl=https%3A%2F%2Fwww.cnblogs.com%2F
参考：https://www.w3school.com.cn/jquery/attributes_toggleclass.asp
https://www.runoob.com/jquery/jquery-hide-show.html