jquery基本

jquery基本

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('');//置为空