1.jQuery 是一个轻量级的javascript的框架 对javascript进行了封装
提供了很多操作方式供开发者直接调用
2.jQuery的特点: 写的少 做得多
a:强大的选择器
b:出色的dom操作
c:良好的兼容性
d:可以提供方面的ajax操作
3.怎么写 jQuery
a:引入jQuery
<script type="text/javaScript" src="jQueryxx.xx.js"></script>
jQuery 有不同的版本
jQuery1.xxxx.js
jQuery2z.xxxx.js
b.写法
1.复杂写法
$(document).ready(
function () {
alert("aa");
});
2.简写
$(function () {
alert("bb");
})
c:选择器
1.id选择器:
$(function () {
alert($("#box").html());//获取id为box的内容且包括样式
alert($("#box").text());//只获取id为box的内容不包括样式
alert($("#box").html("<font>aaa</font>"));//将id为box的内容换成aaa且包括样式
alert($("#box").text("<font>aaa</font>"));//将id为box的内容换成<font>aaa</font>且不包括样式
//如果.html() .text() 中含有内容则替换原有内容,不然则输出原有内容
})
2.class选择器
$(function () {
$(".mybox").text("<font color='#ff0000'>bbbb</font>");
$(".mybox").html("<font color='#ff0000'>bbbb</font>");
});
3.标签选择器中选择子代
$(function () {
$("p:eq(2)").text("bbbb"); //获取第三个p标签 eq(x)
x从0开始算
$("p:even").css({"background":"#ff0000"}); //获取奇数p标签
$("p:odd").css({"background":"#0000ff"}); //获取偶数p标签
});
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</body>
4.相邻标签选择器的使用
$(function () {
//$("div p").css({"background":"#ff0000"});//后代选择器
// $("div>p").css({"background":"#0000ff"});//子代选择器
$("div+p").css({"background":"#0000ff"});//紧跟在div后面的第一个p
$("div~p").css({"background":"#0000ff"});//匹配div后面的所有p
});
</script>
</head>
<body>
<p>段落1</p>
<div><p>段落2</p></div>
<p>段落3</p>
<div>
<ul><li><p>段落4</p></li></ul></div>
<p>段落5</p>
5.dom 操作
$(function () {
// $("#img").attr({src:"images/gotoTop1.png",
// width:50,
// title:"这是一张图片"
// });
// $("#img").removeAttr("title");
// $("#img").addClass("box"); //添加类样式
// $("#img").removeClass("box"); //删除类样式
// //如果存在就删除类样式,不存在就添加类样式
// $("#img").toggleClass("box");
// $("#img").toggleClass("box");
var a = $("#shu").val("admin"); //获取id为shu的输入框并将初始值设为admin
alert(a.val()); //获取输入的值
});
6.文档操作
function add() {
$("#box").append("<div class='mybox'></div>");//在boxdiv后放一个属性为mybox的div
$("<div class='mybox'></div>").appendTo($("#box"));//将一个属性为mybox的div放在boxdiv后
$("#box").before("<div class='mybox'></div>");//在boxdiv前放一个属性为mybox的div
}
function bao() {
$("#bao").wrap("<div class='mybox'></div>");//将baodiv用myboxdiv包含起来
}
function addquestion() {
$("ol").append("<li><input type='text'/></li> ");//在ol中添加li li中添加输入框
}
function deletequestion() {
$("ol li:last").remove();//将ol 中的最后一个li删除
}
7.动态效果展示
function show(){
$("#box").show(2000).delay(2000).hide(2000);//将boxdiv在两秒的时间内展现出来,
// 然后停留两秒,最后在两秒的时间内消失
}
$( function(){
$("#box").slideDown(2000).delay(2000).slideUp(2000);//将boxdiv在两秒的时间内下降展现出来,
// 然后停留两秒,最后在两秒的时间内上升消失
});
4.软件的版本
xxxx@ 内测版本
xxxxB 内测完成 已经修复了基本功能的bug 可以供外部用户测试的版本
xxxxR 最终版本 正式版本
软件名_大版本号_小版本号.js
一般仅仅修改功能,新加入小功能 -》改 小版本号
遇到整体架构 大功能的发布 -> 改 大版本号
5.
区别: window.onload $(document).ready()
只能加载一次 可以执行多次
在页面所有元素加载完成后才能执行 在页面的所有标签加载完成后就可以触发