印象笔记原稿
该笔记是从我的印象笔记里转出来的，格式有点出入，因此，如果有印象笔记账号的可以通过该链接去看。
——–对元素属性(attribute)的操作——-
1、获取属性值
attr(name)
name为属性的名称,attr(name)用来获取属性name的属性值
Ag:
<input type="text" title="ss" value="" />
<script>
var a = $('input').attr('title'); //a = "ss"
</script>2、设置元素的属性
attr({key0:value0,key1:value1})
key为属性名，value为对应的属性要设置的值，可以同时设置多个属性
<img src="../image/img1.jpg" width='30%' />'
<script> $("img").attr({'title':"welcome",'src':'../image/img2.jpg'}); //修改的图片地址，并且新添加了一个title属性
</script>删除元素的属性
removeAttr(name)
name为属性的名称
Ag:
<script>
$("img").removeAttr("src");
</script>———–元素内容的操作———-
html()——–获取html内容
html(val)—–设置html内容
text()——–获取text内容
text(val)—–设置text内容
Ag:
<div id="d1">nice to meet you</div>
<div id="d2"><p>p to div1</p></div>
<script>
var a = $('#d2').html(); //a = "<p>p to div1</p>"
var b = $('#d1').html('<p>div to p</p>'); //b = <div id="d1"><p>div to p</p></div>
var d = $("#d2").text(); //d = "p to div1"
</script>——-获取和设置元素的值(该方法常用于表单中获取或设置元素的值)———
val()—-获取元素的值
val(val)—-将参数val的值赋给某元素
通过val()方法还可以获取select标记中的多个选项值
Ag:
<!-- val().join(",") -->
<select multiple="multiple" style="height: 96px;width: 85px">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
<option value="6">item 6</option>
</select>
<script>
$("select").change(function(){
var s = $("select").val().join(",");
});
</script>——————元素样式操作————–
直接设置样式
css(name,value)
增加CSS类别
addClass(class0 class1 …)，类别之间用空格分隔
类别切换
toggleClass(class)
删除类别
removeClass([class])，class属性是可选项，如果不选，则删除所选元素的所有类别
—————创建节点元素—————
$(html)用于创建动态元素，其中html为HTML语句。。。在页面中动态创建元素需要执行节点的插入或追加操作
注意：函数$(html)只完成DOM元素创建，加入到页面还需要通过元素节点的插入或追加操作；同时，在创建DOM元素时，要注意字符标记是否完全闭合，否则达不到预期效果
内部插入节点
append(content)----------向所选择的元素内部插入内容
append(function(index,html))----向所选择的元素内部插入function函数所返回的内容
appendTo(content)-----------把所选择的元素追加到另一个指定的元素集合中
prepend(content)---------向每个所选择的元素内部前置内容
prepend(function(index,html))-------向所选择的元素内部前置function函数所返回的内容
prependTo(content)------将所选择的元素前置到另一个指定的元素集合中 <script>
//把appendTo方法前部分的内容插入其后部分的内容中
$("span").appendTo($('div'));
//把prependTo方法后部分的内容插入其前部分的内容中
$("span").prependTo($("div"));
</script>
外部插入节点
after(content)----------向所选择的元素外部后面插入内容
after(function)----向所选择的元素内部插入function函数所返回的内容
before(content)----------向所选择的元素外部后面插入内容
before(function)----向所选择的元素内部插入function函数所返回的内容
insertAfter(content)------将所选择的元素插入另一个指定的元素外部后面
insertBefore(content)-----将所选择的元素插入另一个指定的元素外部前面—————–复制元素节点———–
clone()———该方法仅仅只是复制节点，复制的节点不具有任何元素行为
clone(true)——–当设置参数true时，还将复制元素所有的事
<img src="../img/banner0.jpg" width="40%"/>
<span></span>
<script>
$(function(){
$("img").click(function(){
//因为在clone里传入了true参数,因此点击clone后的图片点击是也具有click事件
//如果使用clone()方法，那么只有单击原图片才可以复制新的图片元素，新复制的图片
//元素不具有任何功能
$(this).clone(true).appendTo("span");
});
});
</script>————替换节点—————–
replaceWith(content)
replaceAll(selector)注意：replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，
前者使用括号中的字符替换所选择的元素，后来是用字符串替换括号中所选择的元素。同时，一旦完成 替换，被替换元素中的全部事件都将消失
<body>
<p>姓名：<span id="span1"></span></p>
<p>邮箱：<span id="span2"></span></p>
<span></span>
<script>
$(function(){
$('#span1').replaceWith('<span>谭青青</span>');
$('<span>sdhjdwkun</span>').replaceAll("#span2");
});
</script>
</body> —————包裹节点—————
wrap(html)------------把所有选择的元素用其他字符串代码(html)包裹起来
wrap(elem)---------把所有选择的元素用其他DOM元素包装起来
wrap(fn)------------把所有选择的元素用function函数返回的代码包裹起来
unwrap()------------移除所选元素的父元素或包裹标记
wrapAll(html)--------把所有选择的元素用单个元素包裹起来
wrapAll(elem)--------把所有选择的元素用单个DOM元素包裹起来
wrapInner(html)------把所有选择的元素的子内容（包括文本节点）用字符串代码包裹起来
wrapInner(elem)------把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来
wrapInner(fn)---------把所有选择的元素的子内容（包括文本节点）用function函数返回的代码包裹起来注意：wrap(html)与wrapInner(html)方法较为常用，前者包裹外部元素，后者包裹元素内部的文本字符
<body>
<p>最喜欢的运动：<span id="span1">羽毛球</span></p>
<p>最喜欢的图书类型：<span id="span2">网络、技术</span></p>
<span></span>
<script>
$(function(){
$('p').wrap("<b></b>");
$('span').wrapInner("<i></i>");
});
</script>
</body>——————遍历元素—————-
each(callback)
注意：参数callback是一个function函数，该函数还可以接受一个形参index,此形参为遍历元素的序号（从0开始）；如果需要访问元素中的属性，可以借助形参index,配合this关键字来实现元素属性的设置和获取。
<body>
<div class="aa" id="d1">d1</div>
<div class="aa" id="d2">d2</div>
<div class="aa" id="d3">d3</div>
<div class="aa" id="d4">d4</div>
<div class="aa" id="d5">d5</div>
<input type="text" id="dd" />
<script>
$(function(){
//获取点击事件的id
$(".aa").each(function(index){
this.onclick = function(){
var _id = this.id;
$('input').val('第'+index+'个div,id为：'+_id);
};
});
});
</script>
</body>—————删除元素—————–
remove([expr])，其中参数expr为可选项，如果接受参数，则该参数为筛选元素的jquery表达式，通过该表述式获取指定的元素，并进行删除
empty()，为清空所选择的页面元素或所有的后代元素
<body>
<div class="aa" id="d1">d1</div>
<div class="aa" id="d2">d2</div>
<div class="aa" id="d3">d3</div>
<div class="aa" id="d4">d4</div>
<div class="aa" id="d5">d5</div>
<input type="text" id="dd" />
<script>
$(function(){
//获取点击事件的id
$(".aa").each(function(index){
this.onclick = function(){
var _id = this.id;
var c = $('input')
c.val('第'+index+'个div,id为：'+_id);
};
});
$("#d5").remove(); //删除了id=d5的div
$("#d3").empty(); //删除了id=d3的div
$(".aa").remove('div[id=d1]'); //删除了id=d1的div,remove中采用参数描述的方式
});
</script>
</body> 
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
