jquery学习杂记

Jquery功能
1.像css那样访问和操作DOM
2.修改css控制页面外观
3.简化JavaScript代码操作
4.事件处理更加容易
5.让Ajax技术更加完美
6.让各种动画效果使用方便
7.基于Jquery大量插件
8.自行扩展功能插件

基本核心
1.$ 不管是页面元素的选择,内置的功能函数,都是"$"来起始的
2.连缀功能  $('#div').css('color','red').css('font-size','30px').css('font-weight','bold');
3.jQuery对象和DOM对象之间的互换
alert($('#div'));  //返回jQuery对象
alert(document.getElementById('div'));   //document.getElementById('div') 原生DOM对象
alert($('#div').get(0));  //[object HTMLDivElement]
alert($(document.getElementById('div')));  //返回Jquery对象
剔除Jquery的$所有权           JQuery.noConflict();

1.简单选择器  css添加样式,jQuery添加行为
id #
class .
标签 div
返回元素个数 size(); 或length
 #box > p
2.进阶选择器-简单选择器延伸
群组选择器
$(function(){
    $('div,p,strong').css('color','red');
});
后代选择器
$(function(){
    $('ul li p').css('color','red');
});
通配选择器 *
在全局范围使用*会极大地消耗资源所以不建议在全局使用
$(function(){
    $('ul li *').css('color','red');
});
3.高级选择器
层次选择器
//后代选择器
$('ul  li a')
find()方法
//子选择器 选择子节点 不选择孙子节点
$('div>p')
children()方法
//next选择器 只获取某节点后一个同级DOM对象
$('div+p')
next()方法
//nextAll选择器 获取某节点后面所有同级DOM对象
$('div~p')
nextAll()方法
//$('#box').prev('p').css('color','red');  //同级上一个元素
//$('#box').prevAll('p').css('color','red'); //同级所有上面元素
//$('#box').prevUntil('p').css('color','red');  //同级上非指定元素选定,遇到则停止
//$('#box').nextUntil('p').css('color','red');  //同级下非指定元素选定,遇到则停止
//$('#box').siblings('p').css('color','red');  //同级上下所有元素选定
属性选择器
 $('a[title=xxx]').css('color','red');
  $('a[title^=xxx]').css('color','red');  //头
 $('a[title$=xxx]').css('color','red');   //尾
 $('a[title!=xxx]').css('color','red'); //匹配给定的属性是不包含某个特定值的元素
 $('a[title*=xxx]').css('color','red'); //包含子串
 $('a[title=xxx][alt=xxx]').css('color','red');  //多属性

过滤选择器
1.基本过滤器
:first //选取第一个元素
:last  //选取最后一个元素
:not() //选取以外的元素
$('li:not(.liebiao3)').css('background','blue');
:even  //选择索引(0开始)是偶数的所有元素
:odd //选择索引(0开始)是奇数的所有元素
:eq(num) //获取指定索引的元素
:gt(num) //获取索引大于nun的元素
:lt(num)  //获取索引小于nun的元素
:header //现在标题h1~h6
:focus //:focus过滤器,必须是网页初始状态已经被激活的元素才能实现元素获取,而不是
鼠标点击或是Tab敲击激活的
//jqQuery过滤器的四种方法
first(); last(); not(); eq();
2.内容过滤器
.contains("xxx")   //选取含有xxx文本的元素
:empty   //选取不包含子元素或空文本的元素
:has(selector)   $(':has(.red)')  //选取元素含有class是red的元素 //存在has()方法
:parent  //选取含有子元素或含有文本的元素
jQuery提供了parent()方法,作用是获取当前元素的父元素,返回的是元素集合
parents()    //祖先节点
parentsUntil()  //直到某个祖先节点
3.可见性过滤器
:hidden  //选取所有不可见元素
:visible  //选取所有可见元素
4.子元素过滤器
:first-child  //每个元素第一个子元素
:last-child   //每个元素最后一个子元素
:only -child //获取只有一个子元素的元素
:nth-child(odd/even/eq(index))   //索引从1开始 获取每个自定义子元素的元素
5其他方法
is方法   $('div').is('.one')
$('.red').is(function(){
  return $(this).attr('title')  == '列表3';
}); //注意!必须使用$(this)来表示要判断的元素,否则不管function里面是否返回true或flalse
都与调用的元素无关
hasClass()方法
slice()方法 //slice(0,2) 第一个到第二个
slice(2)  //从第二个位置到最后
end()  //返回当前元素前一个状态
contents()  //返回子节点包含的对象
filter()  //连接多个选择器
filter(:first , :last ; :first-child);
$('li').filter(function(){
    return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background','red');

转载于:https://www.cnblogs.com/jeasonzuo/p/6364518.html