@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ChapterOne</title>
</head>
<body>
<div>
<p id="test"></p>
</div>
<script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script>
//1-1jQuery对象与DOM对象
/*对于才开始接触jQuery库的初学者,我们需要清楚认识一点:
jQuery对象与DOM对象是不一样的
可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换。
通过一个简单的例子,简单区分下jQuery对象与DOM对象:
<p id="test"></p>
我们要获取页面上这个id为test的p元素,然后给这个文本节点增加一段文字:“您好!这是一个段落标签”,并且让文字颜色变成红色。
普通处理,通过标准JavaScript处理:
var p = document.getElementById('test');
p.innerHTML = "您好!这是一个段落标签";
p.style.color = "red";
通过原生DOM模型提供的document.getElementById(“test”) 方法获取的DOM元素就是一个DOM对象,再通过innerHTML与style属性处理文本与颜色。
jQuery的处理:
var $p = $('#test');
$p.html('您好!这是一个段落标签').css('color','red');
通过$('#test')方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。
*/
window.onload = function () {
// 通过原生JS语法获取id为test的元素p
var p = document.getElementById('test');
// 将元素p在html中内容改变
p.innerHTML ="<a href='#'> aasdfsdf</a>";
//p.innerText = "";
// 将元素p的内容颜色改为红色
p.style.color = 'red';
}
$(document).ready(function () {
/**
* 通过jQuery语法获取id为test的元素获得一个jQuery对象
* 调用该对象的html()方法进行更改内容
* 调用该对象的css()方法进行更改颜色样式
*/
var $p = $('#test');
$p.html("P2:您好!您好!这是一个段落标签").css('color','#900');
//$p.html('P2:您好!您好!这是一个段落标签').css('color', 'red');//jQuery链式操作
//$p.append("<a href='#'>a标签</a>").children().html("标签标签").css({'color':'red','font-size':20});
});
/*通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现:
通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有
那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。*/
// <p id="test"></p>
//我们要获取页面上这个id为test的p元素,然后给这个文本节点增加一段文字:“您好!这是一个段落标签”,
//并且让文字颜色变成红色。
</script>
</body>
</html>