<script src="jquery-1.11.1.js"></script>
<script>
//入口函数
jQuery(document).ready(function () {
//如果想要那种方式设置属性或方法，必须转换成该种类型。
//1.js对象转换成jquery对象。 $(js对象);
//2.jquery对象转换成js对象。 1.jquery对象[索引值] 2.jquery对象.get(索引值)
var box = document.getElementById("box");
var cbox = document.getElementsByClassName("box");
var div = document.getElementsByTagName("div");
//jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
var jqbox = $("#box");
var jqCbox = $(".box");
var jqdiv = $("div");
console.log(box);
console.log(jqbox);
console.log("------------");
console.log(cbox);
console.log(jqCbox);
console.log("------------");
console.log(div);
console.log(jqdiv);
//转换。
box = $(box);
cbox = $(cbox);
div = $(div);
console.log(box);
console.log(jqbox);
console.log("------------");
console.log(cbox);
console.log(jqCbox);
console.log("------------");
console.log(div);
console.log(jqdiv);
//转换成了jquery对象，皮上面有功能可以直接调用。
div.css({"width": 100, "height": 100, "border": "1px solid red"});
box.css("background", "red");
cbox.css("background", "yellow");
//jquery对象转换成js对象
jqdiv[0].style.backgroundColor = "black";
jqdiv.get(4).style.backgroundColor = "pink";
});
</script>
</head>
<body>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
</body>
网友评论