**JQUERY** jQuery与HTML
2016-07-24 17:16
465 查看
>html的获取
>>用于DOM操作的HTML方法
text() - 设置或 返回所选的元素的文本内容
html() - 设置返回所选元素内容
val() - 设置或返回表单字段的值
attr() - 用于获取属性值
>html的设置
>>可以直接使用上述三个函数设置文本内容
>>attr()设置改变属性值的方法
可以同时设置多个属性
支持使用匿名函数返回新的值,由两个参数组成,被选列表中当前元素的下标以及原始的旧值
>添加新的HTML内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
>>添加单一元素
>>通过append和prepend添加若干元素
>删除元素
$("selector").remove();
$("selector").empty();
>jQuery对css的操作
>>对类的设置
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
>>jquery 中css()
语法:$("p").css("background- color");
作用:返回属性值
语法:$("p").css("backgroun-color","yellow");
作用:修改属性值
语法:css({"propertyname":"value","propertyname":"value","propertyname":"value",...})
>jQuery尺寸方法
>>访问元素的高度和宽度值
width()返回宽度,不包括内边距
height()返回高度
innerWidth()返回宽度,包括内边距
innerHeight()返回高度
outerWidth()返回元素宽度,包括内边距和边框
outerHeight()返回元素高度
设置元素的高度宽度值
在括号中添加相应参数
>>用于DOM操作的HTML方法
text() - 设置或 返回所选的元素的文本内容
html() - 设置返回所选元素内容
val() - 设置或返回表单字段的值
attr() - 用于获取属性值
>html的设置
>>可以直接使用上述三个函数设置文本内容
<span style="font-size:14px;">$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });</span>>>可以使用上述内容的匿名函数,来设置文本内容。参数包括被选元素列表中当前元素的下标和原始值
<span style="font-size:14px;">$("#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 + ")"; }); });</span>
>>attr()设置改变属性值的方法
可以同时设置多个属性
支持使用匿名函数返回新的值,由两个参数组成,被选列表中当前元素的下标以及原始的旧值
<span style="font-size:14px;">$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });</span>
>添加新的HTML内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
>>添加单一元素
<span style="font-size:14px;">$("p").append("Some appended text."); $("p").prepend("Some prepended text.");</span><pre name="code" class="javascript"><span style="font-size:14px;">$("img").after("Some text after"); $("img").before("Some text before");</span>
>>通过append和prepend添加若干元素
<span style="font-size:14px;">function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }</span>
<span style="font-size:14px;">function afterText() { var txt1="<b>I </b>"; // 以 HTML 创建新元素 var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素 var txt3=document.createElement("big"); // 通过 DOM 创建新元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 }</span>
>删除元素
$("selector").remove();
$("selector").empty();
>jQuery对css的操作
>>对类的设置
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
<span style="font-size:14px;">$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });</span>注意,可以通过逗号将多个选择器分割;可以用空格将多个类分开
>>jquery 中css()
语法:$("p").css("background- color");
作用:返回属性值
语法:$("p").css("backgroun-color","yellow");
作用:修改属性值
语法:css({"propertyname":"value","propertyname":"value","propertyname":"value",...})
>jQuery尺寸方法
>>访问元素的高度和宽度值
width()返回宽度,不包括内边距
height()返回高度
innerWidth()返回宽度,包括内边距
innerHeight()返回高度
outerWidth()返回元素宽度,包括内边距和边框
outerHeight()返回元素高度
设置元素的高度宽度值
在括号中添加相应参数
<span style="font-size:14px;">$("button").click(function(){ $("#div1").width(500).height(500); });</span>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码