【学习随笔】iquery初涉

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

　　text() - 设置或返回所选元素的文本内容

　　html() - 设置或返回所选元素的内容（包括 HTML 标记）

　　val() - 设置或返回表单字段的值

<script>
$(document).ready(function(){$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});
});
</script>
</head><body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

　获取属性 - attr()

<script>
$(document).ready(function(){$("button").click(function(){alert($("#zyc").attr("href"));});
});
</script>
</head><body>
<p><a href="http://www.zyc.com" id="zyc">zyc</a></p>
<button>显示 href 值</button>
</body>

　　设置内容 - text()、html() 以及 val()

<script>
$(document).ready(function(){$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("hello world");});
});
</script>
</head><body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="hi"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>

　　text()、html() 以及 val() 的回调函数

<script>
$(document).ready(function(){$("#btn1").click(function(){$("#test1").text(function(i,origText){return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; });});$("#btn2").click(function(){$("#test2").html(function(i,origText){return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; });});});
</script>
</head><body>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>

　　添加新的 HTML 内容,我们将学习用于添加新内容的四个 jQuery 方法：
　　append() - 在被选元素的结尾插入内容

<script>
$(document).ready(function(){$("#btn1").click(function(){$("p").append(" <b>Appended text</b>.");});$("#btn2").click(function(){$("ol").append("<li>Appended item</li>");});
});
</script>
</head><body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>

　　prepend() - 在被选元素的开头插入内容

<script>
$(document).ready(function(){$("#btn1").click(function(){$("p").prepend("<b>Prepended text</b>. ");});$("#btn2").click(function(){$("ol").prepend("<li>Prepended item</li>");});
});
</script>
</head>
<body><p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol><button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button></body>

　　after() - 在被选元素之后插入内容　　before() - 在被选元素之前插入内容

<script>
$(document).ready(function(){$("#btn1").click(function(){$("img").before("<b>Before</b>");});$("#btn2").click(function(){$("img").after("<i>After</i>");});
});
</script>
</head><body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>

　　通过 jQuery，可以很容易地删除已有的 HTML 元素。

　　remove() - 删除被选元素（及其子元素）

<script>
$(document).ready(function(){$("button").click(function(){$("#div1").remove();});
});
</script>
</head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div><br>
<button>删除 div 元素</button></body>

　　empty() - 从被选元素中删除子元素

<script>
$(document).ready(function(){$("button").click(function(){$("#div1").empty();});
});
</script>
</head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div><br>
<button>清空 div 元素</button>

　　jQuery 拥有若干进行 CSS 操作的方法。

　　addClass() - 向被选元素添加一个或多个类

<script>
$(document).ready(function(){$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body><h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button></body>

　　removeClass() - 从被选元素删除一个或多个类

<script>
$(document).ready(function(){$("button").click(function(){$("h1,h2,p").removeClass("blue");});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body><h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p>
<br>
<button>从元素上删除类</button>
</body>

　　toggleClass() - 对被选元素进行添加/删除类的切换操作

<script>
$(document).ready(function(){$("button").click(function(){$("h1,h2,p").toggleClass("blue");});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body><h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>

　　css() - 设置或返回样式属性

head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){alert("Background color = " + $("p").css("background-color"));});
});
</script>
</head><body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>

　　设置多个 CSS 属性

<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("p").css({"background-color":"yellow","font-size":"200%"});});
});
</script>
</head><body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>

　　jQuery 提供多个处理尺寸的重要方法：

　　width()　　height()

</script>
<script>
$(document).ready(function(){$("button").click(function(){var txt="";txt+="Width of div: " + $("#div1").width() + "</br>";txt+="Height of div: " + $("#div1").height();$("#div1").html(txt);});
});
</script>
</head>
<body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p></body>

　　innerWidth()　　innerHeight()

<script>
$(document).ready(function(){$("button").click(function(){var txt="";txt+="Width of div: " + $("#div1").width() + "</br>";txt+="Height of div: " + $("#div1").height() + "</br>";txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";txt+="Inner height of div: " + $("#div1").innerHeight();$("#div1").html(txt);});
});
</script>
</head><body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br><button>显示 div 的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p></body>

　　outerWidth()　　outerHeight()

<script>
$(document).ready(function(){$("button").click(function(){var txt="";txt+="Width of div: " + $("#div1").width() + "</br>";txt+="Height of div: " + $("#div1").height() + "</br>";txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";txt+="Outer height of div: " + $("#div1").outerHeight();$("#div1").html(txt);});
});
</script>
</head><body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br><button>显示 div 的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p></body>

转载于:https://www.cnblogs.com/sakura-zhang/p/7429932.html

【学习随笔】iquery初涉相关推荐

Ibatis学习随笔
Ibatis学习随笔 < person > < id > 1 </ id > < firstName > Clinton </ ...
Delphi面向对象学习随笔六：接口
Delphi面向对象学习随笔六:接口 Delphi面向对象学习随笔六:接口作者:巴哈姆特 (转载请注明出处并保持完整) 在对象化中,类的继承是一个非常强大的机制:而更加强大的继承机制应该是来自从 ...
python rowcount_PyQt（Python+Qt）学习随笔：QTableWidget的currentItem、rowCount、columnCount等部件状态属性访问方法...
老猿将QTableWidget表格部件中反映部件当前情况的一些方法归类为部件状态访问方法,包括部件的行数.列数.当前项.当前行.当前列等属性访问方法. 1.行数rowCount QTableWidge ...
C#程序集Assembly学习随笔(第一版)_AX
①什么是程序集? 可以把程序集简单理解为你的.NET项目在编译后生成的*.exe或*.dll文件. 嗯,这个确实简单了些,但我是这么理解的.详细: http://blog.csdn.net/sws83 ...
Delphi面向对象学习随笔一：类与对象的关系
Delphi面向对象学习随笔一:类与对象的关系作者:巴哈姆特 http://www.cnpack.org (转载请注明出处并保持完整) 工作几年了,总想做点总结,于是有了这篇东西,叫随笔吧呵 ...
64位BASM学习随笔（一）
64位BASM学习随笔(一) Delphi的BASM一直是我最喜爱的内嵌汇编语言,同C/C++的内联汇编相比,它更方便,更具灵活性,由于C/C++的内联汇编仅仅能是或插入式的汇编代码,函数花括号 ...
2021.3.14学习随笔
学习随笔摆仙果题目具体链接给定有规律的字符序列,对比输入的字符序列,对比相同的长度. 题目的不同之处:该题是字符串头部对齐.还有不对齐的,就类似与字符串匹配 #include<iostre ...
Vue学习随笔+商城项目【上】
更新日期:2021-02-10 晚 [新年快乐] 附:Vue学习随笔+商城项目[下] 目录(部分) (一)ES6补充 1.1块级作用域 1.1.1 什么是变量作用域 1.1.2 没有块级作用域造成的问 ...
JAVA面试八股文宝典（黑马学习随笔）-- 基础篇
学习随笔简介跟随着黑马满老师的<Java八股文面试题视频教程,Java面试八股文宝典>学习,视频教程地址:Java八股文面试题视频教程,Java面试八股文宝典(含阿里.腾迅大厂java面 ...
butter滤波器是iir吗_学习随笔之IIR滤波器与FIR滤波器
学习随笔之IIR滤波器与FIR滤波器 IIR滤波器(Infinite Impulse Response Digital Filter无限冲击响应数字滤波器)与FIR滤波器(Finite Impulse ...

【学习随笔】iquery初涉

【学习随笔】iquery初涉相关推荐

最新文章

热门文章