jq

1、引入<script src=”jquery.js”></script>

2、选择器：同css选择器；

$(‘#id’)；$(‘p’);$(‘[href=”#”]’);$(‘.class’)

3、事件

$(‘p’).click(function(){});//点击事件

hover(function(){},function(){});

$(this)的使用，指当前元素

 

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

$('ul li').hover(function(){
$(this).css('color','red');//鼠标移入
},function(){
$(this).css('color','yellow');//鼠标移出
})
$('#qw').click(function(){//jq点击事件
alert('123');
})

获取内容:text();html();val();

$(‘#p’).text();//获取p里面的内容

$(‘#p’).html();//获取p里面子元素的标签和内容都获取

 

设置赋值：text(val);html(val);val(val);

$(‘#p’).text(‘海边’);//原先元素没有了，直接变成改变

$(‘#p’).html($(‘#p’).html()+'<b>jiacu</b>';);//输出改变jiacu

获取属性：attr(‘href’);//获取属性值

$(‘#p’).attr('title','提示');//鼠标移入时显示提示

 

设置赋值：attr(‘href’,val);

css()设置或返回样式的属性；

返回属性css(‘proname’)      //$(‘#id’).css(‘height’)，获取height

设置单个属性css(‘height’,’20px’)   //$(‘#id’).css(‘height’，‘20px’)

设置多个属性css({‘height’:’20px’,’width’:’20px’})   //$(‘#id’).css({‘height’：‘20px’，‘width’：‘20px’})

 

加class名class=‘s’：$(‘#id’).addClass(‘s’)

移出class名：$(‘#id’).removeClass()

判断id里面是否有class名为s的值：$(‘#id’).hasClass(‘s’)

$(‘div’).toggleClass(‘s’);

 如果div里面有class=“s”就删除，如果没有class就添加

获取宽高

 

$(div).width();$(div).height();（内容的宽高）

$(div).innerWidth()宽度（包括内边距）

$(div).innerHeight()

$(div).outerWidth()宽度（包括内边距和边框）

$(div).outerHeight()高度，包括内边距和边框

 

1、添加删除元素

$(div).append(要插入的内容):在被选元素结尾插入内容，元素的里面

$(div).prepend(要插入的内容):在被选元素的开头插入内容

$(div).after(要插入的内容):在被选元素之后插入内容；元素的外面，津贴元素

$(div).before(要插入的内容)：在被选元素之前插入内容；

$(div).remove():删除自己（及其子元素）

$(div).empty():删除被选元素的子元素；

$(div).on(‘click’,function(){});动态事件

 给新添元素添加一个事件

<div id="ww">
点击按钮
</div>
<div class="aaa">
加
</div>

$('#ww').click(function(){                //点击id为ww内容时
$('.aaa').append('<p class="p">加上</p>');         //在class为aaa的后面加一个p标签
})
$('body').on('click','.p',function(){                       //点击p标签内容时弹出弹框1234
alert('1234');       //on（‘事件名称hover等’，‘新增class名’）
})

 

 

1、遍历

祖先:

$(div).parent();找父级

$(div).parents()；一直往上找

后代:

$(div).children();

$(‘.aa’).find(‘#p’)一直往下找

同胞:

$(div).siblings();不包含自己，自己所有的元素都删除

$(div).next();下一个

$(div).prev();上一个元素

 

$(div).first()首个元素；

$(div).last()最后一个元素；

$(div).eq()索引号元素，（）从0开始