jQuery操作DOM元素案例

直接打开注释即可观察效果，都已经测试通过！！！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>操作DOM元素</title><script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//直接设置样式//$("#div1").css("color","red");//同时设置多个属性//$("#div1").css({"color":"red","background":"pink"});//addClass//$("#div1").addClass("div1_style");//removeClass//$("#div1").removeClass("div1_style");//内容操作，html方法，会解析标签/*$("#div1").html("<span style='color:purple'>这是添加的紫色的东西</span>");*//*alert($("#div1").html());*///text方法，直接就输出来了
//              $("#div1").text("<span style='color:purple'>这是添加的紫色的东西</span>");/*alert($("#div1").text());*///获取表单的值//$("#name").val();//给表单里面赋值//$("#name").val("1111");//节点遍历//获取节点并隐藏//$("div").hide();//创建节点：//var $newNode = $("<li>这是一个li</li>");//创建一个空的li节点//内部插入//向div里面插入创建的节点(内部的元素)//$("#div1").append($newNode);//把所选择的元素追加到另一个元素里面//$("#div1").prepend($newNode);//将新元素插入到选择的前面//$("#div1").prepend($newNode);//prependTo与prepend效果一样，用法有差别//$($newNode).prependTo("#div1");//外部插入//after,将元素插入到选择的后面(外面)//$("#div1").after($newNode);//insertAfter()与after的效果是一样的，用法不一样//$($newNode).insertAfter("#div1");//给选中元素的前面插入//$("#div1").before($newNode);//insertBefore，与before的效果一样，但是用法不一样//$($newNode).insertBefore("#div1");//删除节点//$("li").remove();//删除节点的第二种方法//$("li").empty();//替换节点replaceWith//$("li:eq(0)").replaceWith($newNode);//替换节点replaceAll//$($newNode).replaceAll("li:eq(1)");//复制节点//$("li:eq(1)").clone(true).appendTo("ul");//属性操作//1.获取属性//alert($("#name").attr("type"));//2.设置属性的值(设置表单不管用，设置图片可以)//$("img").attr({width:"500",height:"100"});//删除元素的属性//$("img").removeAttr("width");})</script><style type="text/css">#div1{width: 200px;height: 200px;border: 1px solid black;}.div1_style{font-size: 50px;}</style></head><body><div id="div1">div1</div>用户名：<input id="name" type="text" name="text" /><ul><li>第一个li</li><li>第二个li</li><li>第三个li</li><li>第四个li</li><li>第五个li</li></ul><img src="img/img1.jpg" width="300" height="500"/></body>
</html>

jQuery操作DOM元素案例相关推荐

jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
第四章使用jQuery操作DOM元素
一.DOM的分类: 1.DOM core 2.HTML-DOM 3.CSS-DOM 二.css操作语法: $("#div1").css("color",&qu ...
使用jQuery操作DOM元素
一.DOM分类: 1.DOM core 2.Html-DOM 3.CSS-DOM 二.css样式 $(this).css("font-size","25px") ...
vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
【面试必备】javascript操作DOM元素
前言时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
jq追加html属性,jQuery 操作 HTML 元素和属性的方法
jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 My Test JQuery $( ...

jQuery操作DOM元素案例

jQuery操作DOM元素案例相关推荐

最新文章

热门文章