JQuery

2018-04-05 本文已影响0人倾国倾城的小饼干

找到HTML元素
改变HTML中的内容
根据用户操作做出反馈，比如按下按钮
动画效果
ajax

找到HTML元素

$('h1')
$('h1').text()
$('h1').text('where to')

如果想要加载完页面再加载jquery则可以这样：

$(document).ready(function(){<code>});

用jquery:
1.到jquery.com下载jquery
2.在HTML文件中加载'<script src='jquery.min.js'></script>'

在DOM中定位元素：

利用选择器

<h1>where do you want to go</h1>
<h2>travel</h2>
<p>plan your next adventure</p>
<ul id='destinations'>
  <li>Rome</li>
  <li>paris</li>
  <li class='promo'>rio</li>
</ul>

$('li').text('ro')
$('p')
$('#destinations')
$('.promo')

<ul id='destination'>
  <li>rome</li>
  <li>
    <ul id='frame'>
      <li>paris</li>
    </ul>
  </li>
  <li class='promo'>rio</li>
</ul>

直属子元素：子选择器$('#destination>li')
选择多个元素：$('.promo,#frame')
ul下的第一个：伪选择器：$('#destination li:first')
ul下的最后一个：$('#destination li:last')
ul下的奇数个/偶数个：$('destination li:odd'),$('#destination li:even')

元素遍历

如果找到destination下的所有li则不想用子元素：$('#destinations').find('li')
如果找到ul下的第一个子元素，不用伪元素选择器：$('li').last()
如何找到中间元素$('li').first().next()方法链
往上遍历（从子元素到父元素）$('li').first().parent()
往下遍历（从父元素到子元素）$('destination').children('li')直属子元素，如果是find则是所有li。

改变HTML中的内容（DOM遍历）

创建和添加新节点

<li class='vacation'></li>
<h2></h2>
<button></button>

var price=$('<p>From $399.99</p>')
第一种方法：将新节点添加到DOM中去：
有before/after/prepend/append。
此处应该用$('vacation').append(price)
第二种方法：将新节点添加到DOM中去：
.appendTo(<element>)
.prependTo(<element>)
.insertAfter(<element>)
insertBefore(<element>)
此处应该用price.appendTo($('.vacation'))

删除button

$('button').remove()

事件（对用户操作做出反馈）

$(this)

$('button').on('click',function(){})

如果有多种度假方案，添加按钮就全部添加，移除就全部移除，这显然不是我们想要的，这时就用到了this。this的使用要用$(this)则$(this).remove()

查找类的父节点
closest()查找这个类的直接父节点。
parent()查找这个类的所有父节点。
自定义属性
data-xxx可以添加到任何节点上。
.data(<name>)读取属性。
.data(<name>,<value>)设置属性。
事件委托

<li class='vacation onsale' data-price='399.99'>
  <h3>vacation</h3>
  <button>Get Price</button>
  <ul class='comments'>
    <li>Amazing</li>
    <li>want to go!</li>
  </ul>
</li>

$('.vacation').first().data('price')获得价格
如果点击按钮就会调用函数，则如果页面上其他地方也有button，则就会出错，所以只想让vacation里的button生效。
$('.vacation button').on('click',function(){})
也可以这样：$('.vacation').on('click','button',function(){})让事件在vacation上发生，但是实际起作用的是button。

filter和addClass/removeClass

<ul>
  <li class='vacation onsale'>
    <ul class='comments'>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li class='vacation'></li>
  <li class='vacation'></li>
</ul>

filter
$('.vacation onsale')/遍历：$('.vacation').filter('.onsale')
.addClass和.removeClass
$('.vacation').filter('.onsale').addClass('high lighted')

toggleClass()
$(this).toggleClass('high highed')如果有这个类就添加，如果没有就移除
.slideDown滑动显示；.slideUp()用来隐藏；.slideToggle()两种状态轮流
键盘事件
keyperss/keydown/keyup
表单事件
blur/select/change/focus/submit
val
可以设置input值，也可以直接获取
.val(<new vlaue>)/.val()
淡入淡出效果
.fadeIn()/.fadeOut()/.fadeToggle()/
阻止默认行为
event.preventDefault()
把字符串转换成数字，要在字符串前面用“+”号+(this).val()
改变CSS样式
设置css
$(this).css('background-color','1px solid red')
.css('border-color','1px solid blue')//繁琐
$(this).css({'background-color':'#23565','border-color':'1px solid red'}) 如果觉这样也是繁琐，可以把样式写在css中，然后添加类(addClass)
$(this).find('price').css('display','block')可以用$(this).find('price').show()替代，还有$(this).find('price').hide()

动画

$(this).css('top':'-10px')//繁琐
$(this).animate({'top':'-10px'})
hasClass:$(this).hasClass('highlighted')//一般用于if中是否包含highlighted这个类。
$(this).animate({'top':'-10px'},400/'fast'/'low') //动画速度
在js中用了动画样式，如果只在css中用动画样式怎么做？
.vacation{
transition: top 0.2s;
}

JQuery常用方法（函数）

.each(function(index,Element))
html:

<div class='box'>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

jquery:

$('.box>ul>li').each(function(index,node){
  var str=$(node).text
  $(node).text(str+str)
})//目的是把1.2.3.4变成11.22.33.44,node是原生js对象，代表元素li。index代表元素li的下标。

使用each时也可以用this，对应原生dom对象，对应node。

$('.box>ul>li').each(function(index,node){
  var str=$(this).text()
  $(this).text(str+str)
})

map(function(index,element))

var arr=$('.box>ul>li').map(function(){
  return $(this).text()//this对应原生dom对象
})
console.log(arr)

.extend()扩展对象

var obj1={a:1}
var obj2={b:2,d:5}
var obj3={b:3,d:5}

1.$.extend(obj1,obj2)//obj1==={a:1,b:2,c:3}把obj2的扩展到obj1上，obj1有的就覆盖，没有就新增。
2.$.extend(obj1,obj2,obj3)//{a:1,b:3,c:3,d:5}把obj2,obj3扩展到obj1上。
3.如果不想修改obj1则var obj4={}
$.extend(obj4,obj1,obj2,obj3)//{a:1,b:3,c:3,d:5}
也可以var obj5=$.extend({},obj1,obj2,obj3)

.clone深复制
$('.hello').clone()
index()获取兄弟元素中的排行
$('.active').index()

<div class='ct'>
  <div class='c1'>c1</div>
  <div class='c2'>--</div>//想知道--在c2中的排行则`$('.ct').index('.c2')`
</div>

.ready
$(document).ready(function(){})//当dom结构完全加载后再加载
.eq()

jquery ajax

$.ajax({
  url:'/hello',
  method:'get',
  dataType:'json',
  data{
    a:1,
    b:2
}
  success:function(ret){
    console.log(ret)
}
  error:function(){}
})//老的写法

$.ajax({
  url:'/hello',
  method:'post',
  dataType:'json',
  data{
    a:1,
    b:2
}
}).done(function(ret){}).error(function(){})//常用的写法

$.get('/hello',{name:'ruoyu',age:28})
  .done(function(ret){
    console.log(ret)
}).fail(function(){
  console.log('error')
})//只是简单的获取数据可以这样写

$.post('/comment',{comment:'饥人谷'})
  .done(function(ret){
    console.log(ret)
})//也是简写

jquery jsonp跨域

$.ajax({
  type:'get',
  url:'/head',
  dataType:'jsonp',
  jsonpCallback:'cb',//设置一个回调函数，名字随便取，和后台的发送的方法一致。
  success:function(){}
})