开头(加载文件):
<script type="text/javascript">
$(document).ready(function(){
代码段
});</script>
//简写(常用方法)
<script type="text/javascript">
$(function(){
代码段
})</script>
JQ控制css属性和html
1、html内容 :html()没有参数表示获取值。有参数表示修改该值。
$("div").html()//获取div的值
$("div").html("aaaa")//将div的值改为“aaaa”
$("div").html("")//将div的值设置为空
$("div").html('<p>aaa</p>')//将该p标签加入到div当中
2、控制css属性:scc() 分为控制单属性和控制多属性
2.1、控制单属性:(一个参数表示获取该属性的值,,两个参数表示修改这个属性的值)
$("div").css("color")//获取div的color的值
$("div").css("color", "red")//更改div的color属性为red
2.2、控制多属性:(每个参数以字典的形式写入)
JQ选择器:
1、快速选择元素(使用方法和css样式一样)
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素
2、选择器过滤
$('li:first').css('background', 'green')//选择li标签中的第一个
$('li:last').css('background', 'green')//选择li标签中的第二个
//***** eq equal等于 选中下标等于某个数字的标签
$('li:eq(1)').css('background', 'green')//选择下标为1的li标签
$('li').eq(0).css('background', 'green')//选择下标为0的li标签
3、对所选择的控件筛选
$('div').has('p'); // 选择包含p元素的div元素
$('div').find('p')选择div下的<p>标签
//在特定条件下效果一样
// $('.box1').has('p').css('background', 'green') // 父级执行命令
// $('.box2').find('p').css('background', 'green') // 子级执行命令
4、siblings(除了选中的以外(排他))
$(this).css('background', 'green')//选中的这个控件变成绿色
$(this).siblings().css('background', 'red')//除了选中的其他都变成红色
//选中为绿其他是红色
5、选择某控件的父级控件parent()
$(this).parent()//选择的控件的父级
6、选择某控件的子级控件children()
$(this).children()//选择选定控件的子级控件
7、获取控件下标index()
$(this).index()//获得选定控件的下标
8、对类名进行操作(删除/添加)
$("div").addClass("aaa")//给div添加class,值是aaa
$("div").addClass("aa")//将div中class为aa值删除(如果没有参数表示删除所有div的class)
$("div").toggleClass("aa")// 添加/删除class(有则添加,没有则删除。可以多次调用实现同一函数对class的不同操作)