jQuery HTML

jQuary获取HTML内容和属性
重要的部分,操作DOM的能力
获取内容-text(),html()以及val()
text():设置和返回所选元素的文本内容
html():设置和返回所选元素内容(包括HTML)标记,是文本里面的html标记
val():设置和返回表单字段的值,即value的缩写,获得输入的字段值。input标签,类型为text
实例:
获取文本内容和HTML内容
$('#button_1').click(function(){
alert('Text:'+ $('#text').text();
});
$('#button_2'.click(function(){
alert('HTML:'+$('#html').html();
});

获得输入的字段值
$('#button_3').click(function(){
alert('value:"+$('#test').val();
});

获取属性值,使用.attr(),如何获得链接属性href的值
$('#button_3').click(function(){
alert('attr:"+$('#test').attr();
});


设置内容-text(),html(),val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});

以上三个jQuary方法具有相同的回调函数,回调函数有两个参数:1)备选元素列表中当前元素的下标;2)原始值。然后以元素新值返回希望使用的字符串
$('#button_1').click(function(){
$('#text').text(function(i, origText){
return 'old text:' + origText + 'new text is hello world'

});
});

attr()设置和改变属性值
$('#button_3').click(function(){
$('#test').attr('href','www.baidu.com');
});

attr()也允许同时设置多个属性
$('#b1').click(function(){
$('#set').attr(
'title':'hello world!,
'href':'www.baidu.com
);
});

attr()的回调函数,同样包含两个参数,被选元素的下标及原始值
$('#bu1').click(function(){
$('#name').attr(function(i, origText){
return orgiText + '/jQuary'
}
}

现货黄金16字口诀:
买入不急,平仓不贪,止损不拖,操作不乱

jQuary添加元素
append:在被选元素的结尾添加元素
prepend:在被选元素的开头加入元素
after:在被选元素之后加入元素
before:在被选元素之前加入元素

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
我们可以创建若干元素,这些元素可以通过text/HTML,jQuary或者JavaScript/DOM来创建,然后通过append方法追加到文本中。对prepend,after,before同样有效
$("#ceshi1205").click(function () {
var a = "<p>Text_HTML</p>"
var b = $("<p></p>").text("Tetx_jQuary");
var c = document.createElement("p");
c.innerHTML="Text_DOM";
$("#test1205").append(a,b,c);
})


jQuary删除元素,使用以下两个方法:
remove():删除被选元素(包括其子元素)
empty():从被选元素中删除子元素
$("#test1205").remove();
过滤被删除的元素,允许对删除元素进行过滤,删除出class='abc'的所有<p>元素
$('p').remove('abc')

获取并设置css的类,通过jQuary对css元素进行操作
方法如下:
addClass()-向被选元素添加一个或多个类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作
css()-设置或返回样式属性

.myFont{
font-weight:bold;
font-size:20px;
}
.green{
color:green;
}

$("#ceshi1205").click(function () {
$("div").addClass("myFont");
})
$("#ceshi1205").click(function () {
$("div").addClass("green");
})

添加多个类:
$("button").click(function(){
$("#div1").addClass("important blue");
});
$("#ceshi1205").click(function () {
$("div").toggleClass("green");
})

CSS方法
设置或返回被选元素的一个或多个样式属性
返回指定的css的值,语法如下:css('property');返回首个元素的匹配值
$('p').css('background-color')
设置css的值:
$("#ceshi1205").click(function () {
$("#div1205").css("background-color","yellow");
})

设置多个css的属性值,采用键值对的形式,构建字典
$("#div1205").css({"background-color":"yellow","font-size":"40px"});

jQuary处理元素和浏览器窗口的尺寸
1.width()方法-设置或返回元素的宽度(不包括内边距、边框和外边距)
2.height()方法-设置或返回元素的高度(不包括内边距、边框和外边距)
$("#ceshi1205").click(function () {
var x = $("#div1205");
var text_width = x.width();
var text_height = x.height();
$("#temp").text("text_width:"+text_width+" text_height:"+text_height);
})

3.innerWidth()方法:返回元素的宽度(包括内边距)
4.innerHeight()方法:返回元素的高度(包括内边距)
$("#ceshi1205").click(function () {
var x = $("#div1205");
var text_width = x.innerWidth();
var text_height = x.innerHeight();
$("#temp").text("text_width:"+text_width+" text_height:"+text_height);
})

5.outerWidth()方法:返回元素的宽度(包括内边距和边框)
6.outerHeight()方法:返回元素的高度(包括内边距和边框)
$("#ceshi1205").click(function () {
var x = $("#div1205");
var text_width = x.outerWidth();
var text_height = x.outerHeight();
$("#temp").text("text_width:"+text_width+" text_height:"+text_height);
})

jQuary遍历
遍历,意为移动,根据其相对于其它元素来查找或者选取HTML元素。以某一项开始,并沿着这个选择移动,直到抵达您希望的元素为止。
对于jQuary,在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞),这种移动被称为DOM遍历.在遍历方法中,最大种类就是树遍历。
div
ul
li li
span b
<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞(拥有相同的父元素)。
右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。

posted @ 2017-12-05 17:46  今夜无风  阅读(152)  评论(0编辑  收藏  举报