jQuery第一篇刚开始认识jQuery的时候

最新推荐文章于 2024-08-29 03:50:53 发布

原创最新推荐文章于 2024-08-29 03:50:53 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

jQuery最详解专栏收录该内容

30 篇文章

订阅专栏

本文通过一个具体的HTML页面示例，展示了如何使用jQuery库来简化DOM元素的选择与样式修改过程，对比了纯JavaScript与jQuery的不同之处，强调了jQuery在网页开发中的便捷性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }</style>
        <script type="text/javascript" src="./jquery-1.10.1.min.js"></script>
        <script>
		//核心:先html css执行完在执行这里.
	/*window.οnlοad=function()
	{
		//获取要操作的元素.
		var div1=document.getElementsByTagName("div")[0];
		var div2=document.getElementsByClassName("box1")[0];
		var div3=document.getElementById("box2");
		//使用js的方式修改背景色.
		div1.style.backgroundColor="red";
		div2.style.backgroundColor="blue";
		div3.style.backgroundColor="yellow";
		*/
	//以上,js方式操作.
	//以下,jq操作.
	//$是jQuery的别称.这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素， 函数作用之一获取各类选择器的的替代把.
	//$();//获取什么?
	$(function()
	{
		var $div1=$("div");
		var $div2=$(".box1");
		var $div3=$("#box2");
		$div1.css({background:"red",width:"200px",height:"200px"});
		$div2.css({background:"blue"});
		$div3.css({background:"yellow"});
	});
	</script>
</head>
<body>
	
	<div></div>
	<div class="box1"></div>
	<div id="box2"></div>
</body>
</html>