什么是jQuery
是javascript的一个“库”。直白的说就是用javascript这门编程语言写好了很多功能。我们可以直接拿过来用。
在HTML文档中嵌入javascript代码
javascript代码应该写在body标签结束之前的script标签中
<body>
<script>
//这里写js代码
</script>
</body>
在网页中输出 hello javascript
alert("hello javascript")
引用外部文件
<script src="jquery.js"></script>
树状结构的几种节点
- 标签是元素节点
- 文字是文本节点
- 属性是属性节点
jQuery作用
操作节点(元素节点、文本节点、属性节点)
改变样式
案例
$(".box").css("background-color","blue");
//$(".box")里面的(“box”)是CSS选择器
//.css 是方法是CSS
//“background-color” 改变的属性
//"blue"改变的值 用英文逗号隔开
不要写在引用jQuery里面的script里面因为写在里面不生效的
案例
$(".click") .click(function(){
$(".click").css("background-color","pink")
}
);
//click点击事件
//function可以把具体的方法写在里面
案例
$(".this").click( function(){
$(this).css("background-color","azure")
}
);
//this关键字点击那个变那个
改变元素的属性节点
其实就是把img里面的src值变成另一个src值
$("#pic").click( function(){
$("#pic").attr("src","1.jpg");
}
);
//("#pic")是img里面的id值名为pic
//.attr改变元素节点的属性
//(“src”,“1.jpg”)改变的图片路径和图片名字
改变文本节点
$("#holl").click( function (){
$(this).text ("javascript");
}
);
//改变文本节点
为了规范必须在在改变节点的后面加上;
用jQuery改变元素样式
CSS的思路是通过CSS选择器获取元素,然后通过CSS属性设置改变元素样式
jQuery的编写也是类似思路,首先通过jQuery选择器获取元素然后通过,jQuery方法操作元素
jQuery常用选择器如下
$("#id"):id选择器
$(".class"):类选择器
$(“h3”):元素选择器