JQuery是一个基于"JavaScript"的框架。它内部就是使用JavaScript语言。它内部封装了大量的方法,可以很方便的操作HTML的页面元素。
JQuery的作用:
1.可以获取HTML页面元素对象;
2.可以更改HTML元素的内容:属性值,文本,样式等等
3.可以更改页面内容;包括:布局,样式
4.可以响应HTML元素的事件--动态绑定事件
5.可以渲染一些网页效果--渐变,淡入淡出
6.内部结合的Ajax--客户端网页无刷新获取服务器端数据
7.可以简化一些复杂的JavaScript任务;
JQuery的引入:
1.要JQuery的js文件,复制到项目的js目录下;
2.在页面的<head>标签内,使用<script>引入这个js文件;
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
注意:我们的JS代码不要写到引入的<scrpit>标签内,要再写一个<script>标签来写我们自己的JS代码
对象获取:$("#元素id");
注意:dom对象获取元素的value值调用是value属性;
JQuery对象获取元素的value值,调用是val()方法;
JQuery的页面加载的两种方式:
页面加载:
1.有些时候,我们需要当页面加载完毕,就执行某些代码。这些代码可以直接写在<script>标签内
但是,此时不能访问HTML元素,因为按照从上至下的加载顺序,此时还没有加载HTML元素。
2.如果想访问HTML页面元素,就需要等待页面加载完毕。
方式一:<body onload = "show1()">
onload = "里面可以调用多个方法,用逗号隔开",会依次调用;
方式二:window.onload = function(){}
可以写多个,会执行最后一个;
方式三:JQuery的方式:
$(document).ready(function(){
})
或者
$(function(){ 【常用】
})
可以写多个,会依次执行;
基本选择器:
1.id选择器:相当于:document.getElementById()
$("#元素id")
2.class选择器:相当于:document.getElementsByClassName()
$(".元素的class")
3.元素选择器:相当于:document.getElementsByTagName()
$("元素名")
例如:为but1绑定click事件
$("#but1").click(function(){
})