JQ笔记

开头（加载文件）：

<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的不同操作）