使用jQuery操作DOM对象

Posted 2022-01-31 yjc1605961523

一.jQuery操作样式

　　/* 单个样式 */
　　$("li:first").css("color","#009933");
　　/* 多个样式 */
　　$("li:eq(1)").css("color":"#FFFF00","background":"#FFCCCC");
　　/* 添加样式，引用style的.xxxxx */
　　$("li:eq(2)").addClass("lis");
　　/* 判断有没有样式 */
　　if($("li:eq(2)").hasClass("lis"))
　　/* 删除样式 */
　　$("li:eq(2)").removeClass("lis");
　　
　　$("input").click(function()
　　/* 样式切换 */
　　$("li:last").toggleClass("chx");
　　);

二.jQuery操作html

　　/*获取标签中的html代码*/
　　$("ul").html()
　　/*指定标签中的html代码*/
　　$("ul").html("<li>需要添加的html代码</li>");

三.jQuery操作text文本

　　/*获取标签中的text代码*/
　　$("li:first").text();
　　/*指定标签中的text文本*/
　　$("li:first").text("需要添加的文本信息");

四.jQuery操作value属性值

　　/*获取标签中的value属性值*/
　　$("input").val();
　　/*指定标签中的value属性值*/
　　$("input").val("隐藏值");

五.jQuery拼接元素

　　　　$("ul").append("<li>标签</li>");

六.jQuery操作节点

　　/* 创建节点 */
　　var $element=$("<li style=‘color:Fuchsia‘>文本</li>");

　　/* 父子级后置追加节点 */
　　/* $("ul").append($element);
　　$element.appendTo($("ul"));
　　*/

　　/* 父子级前置追加节点 */
　　/* $("ul").prepend($element);
　　$element.prependTo($("ul")); */

　　/　* 同辈追加节点 */
　　/* $("li:eq(2)").after($element); */
　　/* $("li:eq(2)").before($element); */
　　/* $element.insertBefore($("li:eq(2)")); */

　　/* 删除 */
　　/* $("li:first").remove(); */
　　/* $("li:first").empty(); */
　　/　　* $("li:first").detach(); */

　　/* 替换 */
　　/* $("li:first").replaceWith($element); */
　　/* $element.replaceAll($("li:first")); */

　　$("li:first").toggle(function()
　　$(this).css("color","green");
　　,function()
　　$(this).css("color","red");
　　
　　);
　　/* 克隆 */
　　var $wht=$("li:first").clone(false);
　　$("ul").append($wht);

七.获取属性

　　/*设置单个属性*/
　　$("li:first").attr("style","color:red");
　　/*设置多个属性*/
　　$("li:first").attr("style":"color:red","id":"wht2");
　　/*设置删除属性*/
　　$("li:first").removeAttr("style");

八.遍历节点

　　/* 子元素 */
　　var lis=$("ul").children("li:eq(2)");

　　/*同辈元素*/
　　alert($("li:first").next().text());
　　alert($("li:eq(3)").prev().text());
　　alert($("li:eq(3)").prevAll().text())

　　$("li:eq(2)").siblings().css("color","blue");
　　/*祖先元素*/
　　$("li:first").parents().css("background","red")
　　/*父级元素*/
　　$("li:first").parent().css("background","yellow");