12、jQuery知识总结-2
1、避免冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式
1 <html> 2 <head> 3 <script type="text/javascript" src="jquery-1.12.2.min.js"></script> 4 <script type="text/javascript" src="demo.js"> ;</script> 5 </head> 6 7 <body> 8 <h2>This is a heading</h2> 9 10 <p>This is a paragraph.</p> 11 12 <p>This is another paragraph.</p> 13 <button type="button">Click me</button> 14 </body> 15 </html>
1 /**
2 * Created by kunyashaw on 2016/3/23.
3 */
4 var jq = jQuery.noConflict();
5 jq(document).ready(function(){
6 jq("button").click(function(){
7 jq("p").hide();
8 });
9 });2、jquery常用
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="demo.js"> ;</script>
</head>
<body>>
<div >
<p >这是段落中的<b>粗体</b>文本。</p>
<br/>
<p >This is a paragraph.</p>
<br/>
<a href="http://www.baidu.com" > baidu </a>
<br/>
姓名:<input > </input>
<div style="
position: relative;
width: 100px;
height: 200px;
background-color: blueviolet;">
This is another paragraph.</div>
<button type="button" >Click me</button>
<button type="button" >Click me2</button>
<button type="button" >显示text</button>
</div>
<button type="button" >显示html</button>
</body>
</html>/**
* Created by 众磊 on 2016/3/23.
*/
;
$(document).ready(function(){
$("#button1").click(function(){
var div= $('div');
var height = $('div').length;
$('div').hide(500, function () {
if(height-- > 1)
{return}
else
{
alert("over");}
});
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
$("#button2").click(function () {
var a = $('a1');
alert($("#a1").attr('href'));
var input = $('input');
alert(input.val());
input.val("oh no!张众磊");
});
var p = $('#p2');
$("#button3").click(function () {
alert(p.text());
p.html('<b>haha</b>');
});
$("#button4").click(function () {
//alert(p.html());
p.text("fucking");
$("#divAll").empty();
});
});- 上一篇 »[Java面试九]脚本语言知识总结.
- 下一篇 »html+css基础知识总结
