什么是 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>
1368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
