——学习过html，css，js再来阅读此篇文章更好
一.基本选择器
1.根据标签名选择
$('input').css('color','red');
找到标签名为input的输入框，并且把里面value的字体颜色设置为红色
2. $('.div1').css('color','red');
找到class属性为div1的并且把里面字体设置为红色
3. $('#div11').css('color','red');
找到id为div1的并且。。
4. $('*').css('background-color,pink');
将所有标签的背景颜色设置为粉色
5. $('input,#div11,.div1').css('color','red')
将符合以上三种样式其中一种的标签的value的颜色设置为红色
二.层次选择器
1.$(s1 s2);//表示s1下的所有s2子类，不只是直接子类
父子选择器，找出s1标签下的s2标签
2.$(s1 > s2);//表示s1下的直接s2子类
也是父子选择器，跟上面的是一个效果
3.$(s1 + s2);
兄弟选择器，获得紧跟s1后面的第一个s2选择器
4.$(s1~s2);获取s1后面的所有的同辈元素
三.并且选择器(用冒号连接)
1.first第一个 last最后一个 没有啥second之类的，要选第二个看下面
$('li:first').css('color','red')
2.eq(下标)小标为多少的//从0开始
$('li:eq(2)')
//要获得下标为2 3 4的三个元素
//:gt(1):lt(3) //这种格式是大于的后面连续三个
3.gt(下标) lt(下标)
$('li:gt(3)')下标大于3的li标签
$('li:lt(5):gt(2)')下标小于5大于2的也就是三四//小于在前面这种格式是正常的思路，小于5大于2也就是3，4
$('li:lt(5):gt(2)')与$('li:gt(2):lt(2)')得到的相等，注：前面写lt后面写gt就是正常的，前面写gt后面写lt就是gt后面的下标记为0重新开始
4.even()偶数下标的 odd()奇数下标的
$('li:odd')下标为奇数的li标签
5.not(选择器)
$('li:not(#s)')id不等于s的li标签
6.header(:前面可以没有东西)
$(':header')表示从h1 到 h6的六个标题标签
7.找出标签为header并且class属性为ii的标签
$(':header.ii')
注：1.关系的多个选择器，前后顺序是没有要求的，但是要避免产生歧义
比如.pearli会产生歧义而li.pear不会
2.并且选择器可以单独使用
四.内容过滤选择器
1.contains
$(div:contains(beijing));
意思是必须是div标签并且里面内容包含beijing，beijing套在标签里也 可以
如
<div><span>I love beijing</span></div>就符合要求
2.has
$(div:has(.cc));//这个我测试没有成功不知道为什么,可以用后面的[class=]代替 意思就是必须是div标签并且里面包含有属性值为cc的class属性
如
<div class = "cc">heihei</div>就满足要求
3.empty
$(div:empty);
意思是div标签里面必须什么都没有，空白的文本标签也不行
<div> </div>不满足要求
<div></div>满足；要求
4.parent
$(div:parent);
意思是div必须是父标签,子标签是空白文本标签也行
<div> <div>满足要求
<div><img/></div>满足要求
<div></div>不满足要求
五.表单域选中选择器
$(.s:checked);就可以得到以下被选中的多选框
对于多选框选中案例//暂时测试不成功
<input type = "checkbox" name = "hobby" class = "s" value = "bas">篮球</input>
<input type = "checkbox" name = "hobby" class = "s" value = "foot">足球</input>
<input type = "checkbox" name = "hobby" class = "s" value = "pingpang">乒乓球</input>
<input type = "button" onclick = "he()"></input>
对于单选框与下拉框也是同理
六.针对属性操作
1.得到属性
$('.s:first').attr('name');得到第一个input标签的name属性
2.修改属性值
$('.s:first').attr('name','bb');将第一个input标签的name属性的 值设置为bb
3.删除属性
$('.s:first').removeAttr('name');删除name属性
4.因为如果要一次修改多个属性，则造成代码重复，可以使用json对象形 式来修改属性,注意：jQuery中不能修改type属性但是js中能
var ob = {name:'aaa',class:'bbb',value:'ccc'}
$('.s:first').attr(ob);根据json对象中的键值对一次修改多个属性
5.根据函数返回值来修改属性
$('.s:first').attr('name',function(){
...
return cc;
});就实现了把name属性的值修改为cc的值
七.针对属性的快捷操作
1.针对class属性的快捷操作
具体操作方法如下
$('.s:first').addClass('s1');
$('.s:first').addClass('s2');
$('.s:first').addClass('s3');
追加class属性值 得到的class属性值就变成's1 s2 s3'
$('.s:first').removeClass('s2')
删除class属性中的值,得到的class属性值就变成's1 s3'
全删掉的话class的值会被删除，属性还在。
$('.s:first').toggleClass('ss');有这个值就删除，没有就添加
这样就实现了网页上的一些开关效果
八.获取标签内内容与获取标签内内容
<a href = "#">超链接</a>
1.标签.html(); 获取标签内html内容,
如：$(a).html();就是获取a标签内html内容
2.标签.html("内容");设置标签内html内容
如: $(a).html('<span>哈哈哈</span>');将a标签内的html内容修改为<span>哈哈哈</span>
3.标签.text();获取标签内文本内容
如：$(a).text();就是获取a标签内文本内容
4.标签.text("内容");设置标签内文本内容
标签.text(" 嘿嘿");就是将标签的文本内容设置为 嘿嘿嘿
两者区别：前者既可以设置文本内容又可以设置html标签与内容，但是后 者只能设置文本内容
九.js只能获取行内样式，也就是style后面的，但是jquery既可以获取行内样式还可以获取内部样式与外部样式
dom设置的样式都会被设置为行内样式
$().css('属性名');获取属性
$().css('属性名','属性值');设置属性值，是设置在行内样式中
$().css('json格式');通过json格式设置多个css属性
注：复合样式可以直接设置，但是获取必须要拆分为单一样式才能获取
比如 border: 1px solid red;
获取的话 分为 border-width,border-style,border-color来获取
十.value属性值快捷操作
<input type = "checkbox" name = "h" value = "bas" class ="h">打篮球</input>
<input type = "checkbox" name = "h" value = "foo" class ="h">踢足球</input>
<input type = "checkbox" name = "h" value = "pp" class ="h">打乒乓球</input>
9.1前面学的对value属性的操作如下
$().attr('value');
$().attr('value','属性值');
现在对value属性的快捷操作如下
$().val();获取value的值
$().val('值');设置value的值
以上操作在复选框，单选框，下拉列表中有突出表现
9.1复选框默认情况下的选中
刚才还没体现val()方法的强大之处，与传统dom代码还简单不到哪里去
下面就让你见识下了:
比如我要实现将value等于foo与pp的复选框设置为默认选中，那么如果 用js的话还要先依次判断value值然后再设置
这里用jquery的话一句话就解决，如下：
$('.h').val(['foo','pp']);就实现将这两个默认选中了
注：若value值为整数则不需要加'引号，是字符串的话就要加
9.2下拉列表默认情况下的选中
获取单个被选中的
$('option:selected').val();
获取多个被选中的
在select标签里面如果在select标签里面设置multip = "multiple"
$('select').val();就可以实现获取选中的值
十一.
jquery的简单的事件操作 mouseover跟mouseout：
$('div').mouseover(function(){
this.style.color = 'yellow';
});
$('div').mouseout(function(){
this.style.color = '';
});
十二.节点的追加
父子节点追加：
标签.append(content):将content添加到标签尾部
标签.prepend(content):将content添加到标签最前面
标签.appendTo(content):将标签添加到content尾部
标签.prependTo(content):将标签添加到content最前面
兄弟节点追加：
标签.before(content):将content添加到标签前面
标签.after(content):将content添加到标签后面
标签.insertBefore(content):将标签添加到content前面
标签.insertAfter(content):将标签添加到content后面
十三.节点的替换与删除
节点的替换
标签.replaceWith(content)
标签被content替换
标签.replaceAll(content)
标签替换content
删除节点
$(父节点).empty();父节点清空子节点
$(匹配节点).remove();删除指定的节点
十四.复制节点
1.只复制节点（包括其内部信息）
$().clone(false);
2.复制节点及它上面的事件
$().clone(true);
十五.属性选择器(1,2最常用)
1.[attributeu]匹配包含指定属性的元素
如$("[attribute]");
2.[attributeu=value]匹配给定的属性是某个特定值的元素
如$(input[value='hehe']')
$('[class][class!=ss]')这表示存在class属性并且其值不等于ss的 元素
还有一些选择器见图片 属性选择器
十六.jQuery中事件绑定的四种形式
//第一种，简单的一个元素的一个事件绑定一个方法
$('div').bind('mouseover',function(){
//这里的this代表一个dom对象，所以可以用$(dom对象)转换为jquery对象
$(this).css('background-color','yellow');
});
//第二种，一个元素的多个事件绑定一个方法,事件名必须以一个空格隔开否则后面的事件无效
$('div').bind('mouseover click mouseout',function(){
console.log("hehehe");
});
//第三种，使用json对象像前面一次设置多个属性的值样绑定多个事件
$('div').bind({
mouseover:function(){
console.log("mouseover");
},
mouseout:function(){
console.log("mouseout");
},
click:function(){
console.log("click");
}
});
//第四种，通过有名函数进行事件绑定,fun1是定义好的一个函数
$('div').bind('mouseover',func1);
十七.取消事件绑定的三种形式
1.$().unbind(); //取消全部事件绑定
2.$().unbind(事件类型);//取消指定类型的全部事件
3.$().unbind(事件类型,有名函数);//取消指定类型事件的指定处理函 数
注意：第三种取消事件绑定，只能是有名函数
十八.基本动画与垂直动画效果
1.基本动画效果
有show(),hide(),toggle()三个方法
function show1(){
$('div').show(2000);
}
function hide1(){
$('div').hide(2000);
}
function toggle1(){
$('div').toggle(2000);
}
2.垂直动画效果
隐藏：slideUp() 垂直隐藏 只改变高度
显示：slideDown 垂直显示 只改变高度
开关：slideToggle() 若是显示则隐藏，隐藏则显示
function show1(){
$('div').slideDown(2000);
}
function hide1(){
$('div').slideUp(2000);
}
function toggle1(){
$('div').slideToggle (500,toggle1);
十九.颜色渐变效果
fadeIn(time,func) 颜色变暗至消失（display变成none）
fadeOut(time)颜色变深直至完全显示(display变成block)
fadeToggle(time)以上两种现象的翻转
time表示达到最终效果所用的时间,func表示效果显示完成后
要执行的方法。
function show1(){
$('div').fadeIn(2000,f4);
}
function hide1(){
$('div').fadeOut(2000);
}
function toggle1(){
$('div').fadeToggle(500);
}
function f4(){
$('div').css('background- color','yellow');
$('div').slideUp(2000,f5);
}
function f5(){
$('div').css('background- color','red');
$('div').show(2000,toggle1);
}
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
