标签:this 转换 str bcd 技术 效果 ace 图片 sid
<script lang="javascript" src="js/lib/JQuery.js"></script> <script lang="javascript" src="js/index.js"></sccipt>
2.1 $(function(){ 内容 });
$(document).ready(function(){ alert("Jquery"); });
<script type="text/javascript"> $(function(){ var dom=document.getElementById("dom"); //DOM方式获取对象 dom.innerHTML="我是DOM对象"; var jquery=$(‘#jquery‘); //JQuery方式获取对象 jquery.html("我是Jquery对象"); }); </script> </head> <body> <p id="dom"></p> <p id="jquery"></p> </body>解析:$(‘ ‘ ) : 选择器,详细后文讲解
结果:
<script type="text/javascript"> $(function(){ var dom=document.getElementById("dom"); //DOM方式获取对象 dom.innerHTML="我是DOM对象"; var jquery=$(‘#jquery‘); //JQuery方式获取对象 jquery.html("我是Jquery对象"); var a=jquery[0]; a.innerHTML="我是从jquery转过来的DOM对象"; //JQuery对象无法使用innnerHTML属性 var b=$(dom); b.html("我是DOM转过来的JQuery对象"); //DOM对象无法使用html()方法 }); </script> </head> <body> <p id="dom"></p> <p id="jquery"></p> </body>
结果:
id选择器一次只能选择一个元素,因为id是唯一的。
<script type="text/javascript"> $(function(){ $(‘#a‘).text("id selected"); $(‘.b‘).text("class selected"); }); </script> </head> <body> <p id="a"></p> <p class="b"></p> <p></p> </body>
结果:
<script type="text/javascript">
$(function(){
$(‘#a‘).text("id selected");
$(‘.b‘).text("class selected");
$(‘p,font‘).text("lalal");
});
</script>
</head>
<body>
<p id="a"></p>
<p class="b"></p>
<font></font>
<p></p>
</body>
结果:
<script type="text/javascript"> $(function(){ $(‘#a‘).css("background-color","red"); $(‘#a‘).css({"border-style":"solid","border-color":"blue"}); }); </script> </head> <body> <p id="a">aaa</p> <p class="b"></p> <font></font> <p></p> </body>解析: JQuery.css()对元素设置一个样式和设置多个样式的不同点就是设置多个样式时需要用花括号{}括起来,用冒号(:)来分开属性与值。
结果:
$(‘div> ul ‘) :选择div中的所有ul子节点 $(‘div ul ‘) :选择div中所有ul节点。 $(‘#one+*‘).css("color","red"); :选择id为one的下一个任意类型的标签 $(‘#one+li‘).css("color","red"):选择id为one的下一个li标签 ,如果下一个不是li标签则获取空对象。 $(‘#one~*‘).css("color","red"); 选择id为one的所有任意兄弟节点。
<script type="text/javascript"> $(function(){ $(‘.a‘).css({"border-style":"solid","border-color":"blue"}); $(‘.a‘).eq(1).css("background-color","red"); //等价于 $(‘.a:eq(1)‘).css("background-color","red"); }); </script> </head> <body> <p class="a">aaa</p> <p class="a">bbb</p> <font></font> <p></p> </body>
结果:
<script type="text/javascript"> $(function(){ $(‘.a:contains("a")‘).css("border-style","solid"); }); </script> </head> <body> <p class="a">aaa</p> <p class="a">bbb</p> <font></font> <p></p> </body>
结果:
<script type="text/javascript"> $(function(){ $(‘p[class="a"]‘).css("border-style","solid"); }); </script> </head> <body> <p class="a">aaa</p> <p class="b">bbb</p> <font></font> <p></p> </body>
结果:
<!-- 选择下拉列表,点击按钮隐藏 -->
<script type="text/javascript"> $(function(){ $(‘#but‘).click(function(){ $(‘:selected‘).hide(); }); }); </script> </head> <body> <form name="f"> 用户名:<input type="text" name="userName"/> <br/> 密 码:<input type="password" name="passwd" /><br/> 性 别:<select name="sex"> <option >第一个</option> <option >第二个</option> <option >第三个</option> <option >第四个</option> </select><br/> <input type="button" value="隐藏选择的内容" id="but"/> </form> </body>
结果:
<script type="text/javascript"> $(function(){ $(‘p:eq(1)‘).attr("id","p1"); $(‘#p1‘).css("border-style","solid"); }); </script> </head> <body> <p>aaa</p> <p>bbb</p> </body>解析: 注意设置一个属性和多个属性的表达。$(‘input‘).attr({"value":"提交","id":15}); 设置input标签的value值为“提交”,id为15。
结果:
4.2.1 创建节点: $(‘<p></p>‘) 创建p标签 并转化为节点。引号不能少。
<script type="text/javascript"> $(function(){ $("button").click(function(){ $(‘p‘).append(‘<b>hello world</b>‘); }); }); </script> </head> <body> <p>我是第一行。</p> <p>我是第二行.</p> <button>点我添加内容</button> </body>
结果:
解析: append()或者appendTo()等插入的是子节点。
<script type="text/javascript"> $(function(){ $("button").click(function(){ $(‘<b>hello</b>‘).appendTo(‘p‘); }); }); </script> </head> <body> <p>我是第一行。</p> <p>我是第二行.</p> <button>点我添加内容</button> </body>
结果:
4.2.3 插入节点(2)
$(‘div‘).after($("<font>aaa123</font>")); 将新创建的font节点加入到div节点之后。
<script type="text/javascript"> $(function(){ $("button").click(function(){ $(‘p‘).after(‘<b>hello world</b>‘); }); }); </script> </head> <body> <p>我是第一行。</p> <p>我是第二行.</p> <button>点我添加内容</button> </body>解析: after()、before()等方法插入的是兄弟节点。
结果:
<script type="text/javascript"> $(function(){ $("button").click(function(){ $(‘p:eq(0)‘).remove(); }); }); </script> </head> <body> <p>我是第一行。</p> <p>我是第二行.</p> <button>点我删除第一个节点</button> </body>
结果:
<script type="text/javascript"> $(function(){ $(‘p‘).html("hello <b>world!!!</b>"); }); </script> </head> <body> <p>aa</p> </body>解析:显示的内容会解析标签。
结果:
<script type="text/javascript">
$(function(){
$(‘p‘).text("hello <b>world!!!</b>");
});
</script>
</head>
<body>
<p>aa</p>
</body>
结果:
解析: 显示的内容把标签当作内容显示出来。
<script type="text/javascript"> $(function(){ $(‘:button‘).click(function(){ var userName=$(‘.userName‘).val(); alert(userName); }); }); </script> </head> <body> <form name="f" > 用户名:<input type="text" name="userName" class="userName"/><br/> 密 码:<input type="password" name="passwd" /><br/> <input type="button" value="显示用户名" /> </form> </body>
结果:
<script type="text/javascript">
$(function(){
$(‘font‘).hover(over,out); //out和over不能加括号
});
function over(){
$(this).css("background-color","blue"); //这里用this表被鼠标覆盖的标签
}
function out(){
$(this).css("background-color","red");
}
</script>
</head>
<body>
<font>鼠标移到这里会有惊喜哦~</font>
</body>
结果:
<script type="text/javascript"> $(function(){ $(‘button‘).bind("click",butClick); //不能是butClick() }); function butClick(){ alert("绑定事件"); } </script> </head> <body> <button>点击绑定事件</button> </body>
结果:
fadeIn([speed],[easing],[fn]):通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。参数:easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
<script type="text/javascript"> $(function(){ $(‘#up‘).click(function(){ //收图 $(‘img‘).fadeOut(2000,up); }); $(‘#down‘).click(function(){ //放图 $(‘img‘).fadeIn(2000,down); }); }); function up(){ alert("收起成功"); } function down(){ alert("放下成功"); } </script> </head> <body> <img src="./imags/abcd.png"> <button id="up">点我收起图片</button> <button id="down">点我放下图片</button> </body>
结果:
解析: fadeIn()用法与fadeOut()差不多,只是fadeIn(5000,show) 效果是在5秒内北京图片从空白到出现,在调用函数。
<script type="text/javascript"> $(function(){ $(‘#up‘).click(function(){ $(‘p‘).slideUp("normal",up); }); $(‘#down‘).click(function(){ $(‘p‘).slideDown("normal",down); }); }); function up(){ alert("收起成功"); } function down(){ alert("放下成功"); } </script> </head> <body> <p>我是一段可收缩的文字</p> <button id="up">点我收起</button> <button id="down">点我放下</button> </body>
结果:
标签:this 转换 str bcd 技术 效果 ace 图片 sid
原文地址:http://www.cnblogs.com/shyroke/p/6475976.html