<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
input {
display : block;
margin : 10px;
padding : 10px;
background : #bbffaa;
border : 1px solid #ccc;
}
/*------------------*/
.left {
width: auto;
height: 120px;
}
.left div {
width: 150px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
a,p{
display: block;
}
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
/*------------------*/
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
font-size: 0.8em;
background: #40E0D0
}
.first{
background-color:lightSkyBlue;
}
.second{
background-color: #ccc;
color: red;
font-size: 1.2em;
}
.third{
background-color:yellow;
}
.sixth{
font-size: 12px;
}
/*------------------*/
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script type="text/javascript">
$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//取Ajax返回结果
//为了简单，这里简单地从文件中读取内容作为返回数据
htmlobj=$.ajax({
url:"F:/yiban/teacher/test1.txt",
async:false
});
//显示Ajax返回结果
$("#myDiv").html(htmlobj.responseText);
});
});
//---------------jQuery-----------
$(document).ready(function(){
$('div').html('hsgvadauier');
//jQuery对象转化为dom对象
var $p = $('#imooc');//通过方法获得我有一个对象，p为类数组对象
$p.html('sufehihfoj').css('color','red');//封装了很多方法，调用
//dom对象转化为jQuery
var div = document.getElementsByTagName('div');//此方法获取所有div节点的元素 得到dom对象合集
var $div = $('div'); //$() 方法传入一个dom对象，jQuery把他封装为jQuery对象
var $first = $div.first();//成为jQuery对象后，就可以调用方法
$first.css('color','red');
//id选择器
var $div = $('#imooc2'); //id是唯一的，只能使用一次
$div.css('border','3px solid red');
//类选择器 隐式的循环
var $div = $('.imooc3');
$div.css('border','3px solid red');
//元素选择器 $('')方法 * 则为所有元素节点
var $p = $('p');
$p.css('border','3px solid green');
//$(this)代表上下文的一个jQuery对象，可以直接使用方法和属性
$('p').click(function()
{
var $this = $('p');
$this.css('color','red');
})
});
// ------------javascript ---------原生DOM 注意 使用变量都要先声明，且语句后面都加；
window.onload = function(){
var p = document.getElementById('imooc'); //通过方法获取DOM元素成为DOM对象
p.innerHTML = 'agsfujwgligu';
p.style.color = 'red';
var $div = $('div'); //jquery对象
var div = $div[0];//转化成DOM对象
div.style.color = 'red';//使用dom对象的属性
var div = $div.get(0);//jquery中的get方法直接访问jquery对象中的dom节点
div.style.color = 'red';
//id选择器
var div = document.getElementById('aaron2');
div.style.border = '3px solid red';
//类选择器 需要手动写循环 会与上面的$('div')效果冲突
var div = document.getElementsByClassName('aaron3');
for (var i = 0;i < div.length;i++) {
div[i].style.border = '3px solid blue';
}
//元素选择器 原生方法 * 则为所有元素节点
var divs = document.getElementsByTagName('div'); //此方法可以获取指定标签的所有节点 divs是dom合集对象
for (var i = 0; i < divs.length; i++){
divs[i].style.border = '3px solid green';
}
//this指的是当前的html对象
var p1 = document.getElementById('test1');
p1.addEventListener('click', function(){
//两种形式等价
this.style.color= 'red';
p.style.color = 'red';
},false);
//元素都有自己的特性。比如img 的src，操作dom的方法 getAttribute，setAttribute ，removeAttribute
获取Attribute就需要用attr，获取Property（特性）就需要用prop
};
</script>
</head>
<body>
------------------------------------
<h2>jQuery.data()静态方法</h2>
<div class="left">
<div class="aaron">
<p>点击看结果</p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<h2>.data()实例方法</h2>
<div class="right">
<div class="aaron">
<p>点击看结果</p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type="text/javascript">
// --------$.data方法 -------------
$('.left').click(function(){
var ele = $(this);
//jQuery.data( element, key, value ) 静态接口,存数据
$.data(ele,'a','data test')
$.data(ele,'b',{
name:'abc'
})
//jQuery.data( element, key ) 静态接口,取数据
var reset = $.data(ele,'a') + '</br>' + $.data(ele,'b').name
ele.find('span').append(reset)
})
// ------------jQuery中 .data方法------ 实例接口 设置数据
$('.right').click(function() {
var ele = $(this);
ele.data('a','data test')
ele.data('b',{
name:'ahbdj'
})
// 实例接口 取出数据 .removeData()删除
var reset = ele.data('a')+ '</br>' + ele.data('b').name
ele.find('span').append(reset)
})
</script>
------------------------------------------------
<h3>获取css属性</h3>
<div class="first">获取颜色</div>
<p></p>
<div class="second">获取文字尺寸</div>
<p></p>
<div class="third">获取宽高尺寸</div>
<p></p>
<script type="text/javascript">
//获取匹配到的第一个元素的属性计算值
$('p:eq(0)').text($('.first').css('background-color'))
//
$('p:eq(1)').text($('.second').css('font-size'))
//
var value = $('.third').css(['width','height'])
$('p:eq(2)').text('width:' + value.width + 'height:' + value.height)
</script>
</br></br></br>
<h3>设置css属性</h3>
<div class="fourth">设置颜色设置文字尺寸</div>
<div class="fifth">设置颜色设置文字尺寸</div>
<div class="sixth">通过回调设置新的值</div>
<div class="seventh">同时设置多少个样式</div>
<script type="text/javascript">
//容错处理大小写 多种写法
$('.fourth').css('background-color','red')
$('.fifth').css('backgroundColor','yellow')
$('.fourth').css('font-size','15px')
$('.fifth').css('fontSize','0.9em')
//设置回调函数，可以对返回的值进行处理
$('.sixth').css('width',function(index,value){
value = value.split('px');
return (Number (value[0]) + 50) + value[1];
})
//传一个对象，设置多个样式
$('.seventh').css({
'font-size' : "15px",
'background-color':"#40e0d0",
'border' : '1px solid red'
})
</script>
//.addClass() 给元素增加样式 .removeClass 删除样式
//.toggleClass 切换样式 有则不变。无则添加。或者有则删除
----------------------------------------
<h3>.val()</h3>
<select id="single">
<option>慕课网</option>
<option>博客园</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">imocc</option>
<option>慕课网</option>
<option selected="selected">博客园</option>
</select>
<input type="text" value="click a button" />
<p></p>
<script type="text/javascript">
//val()获取表单元素的值，匹配第一个
$('p').text($('#single').val())
//有multiple时，返回选中的值
$('p').text($('#multiple').val())
//设置匹配元素的值
$("input[type='text']").val('修改表单字段')
</script>
----------------------------------------
<h3>.html()与.text()</h3>
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
</div>
<h4>显示通过html方法获取到的内容</h4>
<p></p>
<h4>显示通过text方法获取到的内容</h4>
<p></p>
<script type='text/javascript'>
// p:first 第一个p元素，html()获取到第一个匹配元素的html内容
//html(string) 则是设置每一个匹配到的元素的值
$('p:first').html($('.first-div').html())
//第二个p元素， text()获取匹配到元素的所有及后代文本内容合并字符串，，
$('p:last').text($('.first-div').text())
//
$('.left a:first').text('替换第一个a元素的内容')
//改变整个dic的内容
//$('.left div:first ').html('整个div的子节点都被替换了')
//.text(function(index,text) 设置返回内容
$('.left a:first').text(function(index,text){
return '增加新的文本内容' + text
})
</script>
------------------------------------------
<h2>.attr()与.removeAttr()</h2>
<h3>.attr</h3>
<form>
<input type="text" value="设置value" />
<input type="text" value="获取value"/>
<input type="text" value="回调拼接value" />
<input type="text" value="删除value" />
</form>
<script>
//方法 attr（属性名，属性值） 设置属性值
$('input:first').attr('value','传入属性值');//first表示取第一个input，
//方法attr（属性名） 获取属性值
$('input:eq(1)').attr('value'); //索引从0开始，获取第二个input
//设置属性的函数值
$('input:eq(2)').attr('value',function(i,var){
return '通过function设置的值' + val
})
//给元素设置多个属性
$('input').attr('value','value2');
//删除属性
$('input:eq(3)').removeAttr('value')
</script>
-------------------------------------------------
<h2>特殊选择器this</h2>
<p id="test1">点击测试：通过原生DOM处理</p>
<p id="test2">点击测试：通过原生jQuery处理</p>
<div class="aaron3">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron3">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc3">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc3">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div id="aaron2">
<p>id="aaron"</p>
<p>选中</p>
</div>
<div id="imooc2">
<p>id="imooc"</p>
<p>jQuery选中</p>
</div>
<div id="imooc2">
<p>id="imooc"</p>
<p>jQuery未选中</p>
</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>1</div>
<div>2</div>
<div>3</div>
<p id ='imooc'></p>
-------------------------------------
<div></div>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
<script type="text/javascript">alert($) </script>
</body>
</html>
.html(),.text(),.val()三种方法都是用来读取选定元素的内容；
只不过.html()是用来读取元素的html内容（包括html标签），
.text()用来读取元素的纯文本内容，包括其后代元素，
.val()是用来读取表单元素的"value"值。
其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；
另外.html()方法使用在多个元素上时，只读取第一个元素；
.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，
但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。jQuery 和 javascript 样式 比较 学习笔记
猜你喜欢
转载自blog.csdn.net/qq_42114918/article/details/83278729
今日推荐
周排行