jquery
优点
轻量级,兼容主流,减少事件、样式、动画操作复杂度
支持插件扩展,开源、免费
1jQuery顶级对象$
$和jquery对象一样,是简写
1.1jQuery引用
<script src="jquery.js"></script>
2.jquery&dom
dom对象是通过原生js获取的可直接操作文档,只能用原生js的方法
jQuery对象用jQuery对象获取元素(用$()获取),获取的对象只能使用jQuery的属性方法
2.1jQuery和dom互转
dom=>jquery
$(dom对象);
jquery=>dom
$(选择器)[index];
$(选择器).get(index);
3 jQuery选择器
3.1基础选择器
$("#id");
$(".class")
$("element");
$("box1,box2") //群组选择器
3.2层级选择器
$("ul>li"); //子元素
$("ul li"); //后代所有
3.4筛选方法
$("div").parent(); //父级
$("div").parents("#box"); //查找父级id为box的元素
$("ol").children("li"); //同 ol>li
$("ol").find("li") ; 同 ol li
$("li").sibings("li"); // 除了自己外的兄弟节点
$("li").nextAll(); //当前元素后的所有同辈元素
$("li").preAll(); //之前所有 的同辈元素
$("li").eq(0); //相当于$("li:eq(0)")
4 样式操作
4.1 获取css和设置css样式
$(‘选择器’).css(‘样式名’); //获取样式
$('选择器').css('样式名',值); //设置样式
$('选择器').css({'样式一':‘值’,‘样式二’:'值二'});// 修改多个样式
4.2 样式添加与删除
$('选择器').addClass('样式名称');
$('选择器').removeClass('样式名称');
5属性操作
5.1设置和获取固有属性
$('选择器').prop('属性名') // 获取属性值
$('选择器').prop('属性名','设置的值') // 设置属性值
5.2设置和获取自定义元素的属性值
$('选择器').attr('自定义属性名');
$('选择器').attr('自定义属性名','设置自定义属性值');
6 文本内容
6.1 普通元素的html内容获取与设置
$('选择器').html(); //获取内容
$().html() //设置内容
6.2 普通元素的文本内容
$('选择器').text() //获取;
$('选择器').text('设置的内容'); //设置
6.3 表单内容的获取和设置
$(‘选择器’).val(); //获取内容
$(‘选择器’).val('设置的内容'); //设置内容
7. 元素操作
7.1 元素遍历
$().each(function(index,dom){});
$.each($(‘选择器’),function(index,dom){});
7.2元素的创建、添加、删除
var div1=$('<div class="box">hello</div>'); //创建元素
//添加内部元素
$('选择器').append(div1); //添加到后面
$('选择器').prepend(div1);//添加到前面
//添加外部元素
$(选择器'').after(div1);
$(‘选择器’).before(div1);
//删除元素
$(‘选择器’).remove();
//删除所有子节点
$(‘选择器’).empty();//调用api
$(‘选择器’).html('');//置为空