使用jQuery快速高效制作网页交互特效

拼搏现实的明天。 2021-11-27 04:18 205阅读 0赞

一.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>大哥，我不做大哥好多年，我依旧这么Diao</li>");  
  
三.jQuery操作text文本  
　　/\*获取标签中的text代码\*/  
　　$("li:first").text();  
　　/\*指定标签中的text文本\*/  
　　$("li:first").text("大哥，我不做大哥好多年，我依旧这么Diao");  
  
四.jQuery操作value属性值  
　　/\*获取标签中的value属性值\*/  
　　$("input").val();  
　　/\*指定标签中的value属性值\*/  
　　$("input").val("张三，呵呵，呵呵");  
  
五.jQuery拼接元素  
$("ul").append("<li>大哥，我不做大哥好多年，我依旧这么Diao</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");

转载于:https://www.cnblogs.com/1314Justin/p/11052007.html