什么是 jQuery ?
jQuery是一个轻量级的"写的少,做的多"的JavaScript函数库。[独立的javascript文件]
- jQuery 是一个 JavaScript 函数库。[.js]
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
jQuery库包含以下功能:
1.HTML元素选取
2.HTML元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画[元素的隐藏和显示]
6.HTML DOM 遍历和修改
7.AJAX请求【获取后台处理程序返回的数据值】高级操作
jQuery 语法
通过 jQuery,您可以选取HTML 元素【标记】,并对它们执行"操作"(actions)。
基础语法: $(selector).action()
- 美元符号定义 $ -表示jQuery,jQuery表示$。我们可以使用$代替jQuery。
- 选择符(selector)---"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转换成jQuery对象。【 $(selector)--jQuery的构造器--创建jQuery对象】
- action()指对得到的jQuery对象调用的函数/属性
Javascript的页面初始化事件
- body中提供οnlοad=“函数”
- window.οnlοad=function(){}
基本语法:
jQuery 语法
基础语法: $(selector).函数名();
1.$--美元符号--表示jQuery,我们在使用的时候可以使用“$”代替jQuery
2.$(selector)---选择符/器--"查询"和"查找"需要被控制的 HTML 元素
使用上面的选择器得到的是jQuery对象
jquery--$("#p1")-----jQuery对象
$("#p1").css("color","red");
javascript---document.getElementById("p1")----dom对象
document.getElementById("p1").style.color="red";
jquery--$("p")-----jQuery对象
$("p").css("color","red");
javascript---document.getElementsByTagName("p")----dom对象
document.getElementsByTagName("p").style.color="red";
jquery--$(".p2")-----jQuery对象
$(".p2").css("color","red");
javascript---document.getElementsByClassName("p2")----dom对象
document.getElementsByClassName("p2").style.color="red";
3.函数名()---jQuery对象调用的具体函数,指定具体功能
$(".p2").css("color","red")
总结: jQuery对象.函数名([参数]);
<script>
/*javascript 页面初始化执行:
1.执行时机,必须等到整个html页面加载完成以后,在执行包裹代码
2.只能执行一次,如果执行第二次,那么就会覆盖第一次的执行结果*/
window.onload=function(){
alert("一");
}
window.onload=function(){
alert("二");
}
/*jQuery的页面初始化:
1.执行时机,等到整个html页面dom结构生成以后,在执行包裹代码
2.可以执行多次,不会覆盖之前的执行*/
$(document).ready(function(){
alert("①");
})
$(document).ready(function(){
alert("②");
})
//简写如下:
$(function(){
alert("第一次执行");
})
$(function(){
alert("第二次执行");
})
</script>
Jquery对象与javascript对象的转换
通过$("")得到的是Jquery对象
Jquery对象只能调用Jquery函数,
不能使用javascript对象的方法
javascript对象就是我们通过document.getElemen...()得到的dom对象
dom对象只能调用javascript对象的方法,不能使用Jquery函数
//javascript--->jquery
//$(dom对象)
var job3 = $(job2);
alert(job3);
job3.css("color","blue");
//jquery--->javascript
//jqobj.get();
var job4 = job1.get();
alert(job4);
job4[0].style.color="pink";
jquery的构造有常用的两种
$(selecter)---将被选中的html标记构造成Jquery对象
$(javascript对象)---将javascript对象构造成Jquery对象
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
1.元素选择器
jQuery 元素选择器基于元素名选取元素。
<script>
$(function(){
//$("html元素名称")
//var parry=$("p");
//parry.css("font-size","50px");
var parry=$("p");
var size=20;
for(var i=0;i<parry.length;i++){
size=i*10+size;
$(parry[i]).css("font-size",size+"px");
}
});
</script>
</head>
<body>
<p>jquery元素选择器1</p>
<p>jquery元素选择器2</p>
<p>jquery元素选择器3</p>
<p>jquery元素选择器4</p>
</body>
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
<script>
$(function(){
//class选择器--根据元素class属性值选中html元素
$(".p1").css({"font-size":"30px","color":"red"});
//当class属性值相同时会得到一组
//当需要单独控制每一个元素是需要遍历,遍历的每一个元素都是javasript对象
$(".p2").css({"font-size":"40px","color":"red"});
$(".p3").css({"font-size":"50px","color":"red"});
});
</script>
</head>
<body>
<p class="p1">测试jquery的class选择器1</p>
<p class="p2">测试jquery的class选择器2</p>
<p class="p2">测试jquery的class选择器3</p>
<p class="p3">测试jquery的class选择器4</p>
</body>
jQuery HTML
1.jQuery获取/设置文本元素的值
jQuery获取元素的值 text()、html() 以及 val()
text()---返回所选元素的文本内容
html()--返回所选元素的内容(包括 HTML 标记)
val()----返回表单字段的值
<script>
$(function(){
var ce1=$("#p1").html();
alert(ce1);
$("#p1").html("<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>");
var ce11=$("#p1").text();
alert(ce11);
$("#p1").text("<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>");
var ce111=$("[type]").val();
alert(ce111);
$("[type]").val("测试val的jquery函数");
})
</script>
</head>
<body>
<p id="p1">测试<a href="#">jquery</a>的元素操作</p>
<input type="text" value="默认值">
</body>
jQuery - 添加元素
append() - 在被选中元素中插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery - 删除元素
remove() - 删除被选元素(及其子元素)【有过滤功能】
empty() - 从被选元素中删除子元素
<script>
$(function(){
document.getElementById("but1").onclick=function(){
var cj=$("<h2>创建元素</h2>");
$("#div1").append(cj);
}
//删除元素
document.getElementById("but2").onclick=function(){
$("#div1").remove();
}
document.getElementById("but3").onclick=function(){
$("#div1").empty();
}
});
</script>
</head>
<body>
<input id="but1" type="button" value="添加元素">
<input id="but2" type="button" value="删除元素remove()">
<input id="but3" type="button" value="删除元素empty()">
<div id="div1">
</div>
</body>
- jquery的CSS 操作
1.为元素添加不存在的样式
css(样式属性名称,属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
2.为元素添加已经存在的样式
addClass() - 向被选元素添加一个或多个样式类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
<script>
$(function(){
document.getElementById("bu1").onclick=function(){
$("#p1").addClass("pclass");
}
document.getElementById("bu2").onclick=function(){
$("#p1").removeClass("pclass");
}
document.getElementById("bu3").onclick=function(){
$("#p1").toggleClass("pclass");
}
})
</script>
</head>
<body>
<input id="bu1" type="button" value="添加">
<input id="bu2" type="button" value="删除">
<input id="bu3" type="button" value="开关">
<p id="p1"> 测试样式</p>
</body>
获取元素样式
css(样式属性名称) 返回被选元素的指定样式属性值。
<script>
$(function () {
$("#p1").css("color", "red");
$("#p2").css({"color":"blue","font-size":"30px"});
/*得到css样式
javascript中css的控制---得到css样式
行内样式设置
document.getElementById("p1").style.css属性名称
jquery得到css样式
css("css属性名称")*/
var fly=$("#p2").css("font-size");
alert(fly);
})
</script>
</head>
<body>
<p id="p1">测试</p>
<p id="p2">jquery控制css</p>
</body>