2017.7.17 ajaxcss样式事件的获取和使用，及jsp初级语法

来源：互联网发布：ckplayer电影网站源码编辑：程序博客网时间：2024/05/29 17:31

<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
//$("p").hide();//隐藏所有p标签元素
$("p").css("background-color","red");//为所有p标签添加yanse
});
});
</script>
</head>

<body>
<div>
Servlet学习
</div>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">点我隐藏所有p标签元素</button>
<input type=submit name="submit1" value="登陆"> <br><br><br>


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>删除 div 元素</button><br>



<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h3").slideToggle();
});
});
</script>
<h3>这是一个段落。</h3>
<button>点我隐藏</button>

<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function cc(){
$("#but1").click(function(){
alert("小笨猪^W^");
});
}
</script>
<input id = "but1" type = "button" value = "点我呀？" onclick = "cc()">


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
<br>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").select(function(){
$("input").after("输入文本不规范");
});
});
</script>
<input type="text" name="FirstName" value="Hello World" />
<p>请试着选取输入域中的文本，看看会发生什么。</p>


<input id="name" type="text" value="别问我是谁"/>
<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("#name").keydown(function(e){
if(e.keyCode==13){
alert("你敲了回车键！"+ $("name").val());//要处理的业务
}
});
</script>



<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
});
</script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("<b> Hello World!</b>").appendTo("p");
});
});
</script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("ul *").css("background-color","#B2E0FF");
});

</script>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("p:eq(1)").css("background-color","#B2E0FF");
});

</script>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":input").css("background-color","#B2E0FF");
});
</script>
<form action="">
Name: <input type="text" name="user" />
<br />
Password: <input type="password" name="password" />
<br />
<button type="button">Useless Button</button>
<input type="button" value="Another useless button" />
<br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
<br />
</form>


<script type="text/javascript" src="JQ/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$(":selected").hide();
});
});
</script>
<select multiple="multiple">
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
<br />
<button class="btn1">Hide Selected</button>
</body>

</html>

阅读全文

0 0