jQuery基础详解

1.jquery

jQuery:封装常用的javaSaript功能代码,提供一种简便的javaScript设计模式.
具有独特的链式语法和短小清晰的多功能接口,具有高效灵活的css选择器,并且可对css选择器进行扩展,拥有便捷丰富的插件,并且可以兼容各种主流浏览器.
使用方法:官网下载jquery文件,然后在html中像调用外部js文件一样调用

jquery的入口
$(document).ready(function(){
    //jquery代码
})
$(function(){
    //jquery代码
})
两者等价,任写其一都可.

jQuery中选择器和css选择器思路一样.分为三种基本选择器
1.ID选择器
  $(function(){
   var $box=$("#box");
})
选择器中其他方法与之前css中一模一样.
​
2.标签选择器
  $(function(){
    var $div=$("div")
})
​
3.类选择器
$(function(){
    var $wrap=$(".wrap")
})

1.群组选择器
  $(function(){
    var $ele=$(".box,#box,div")  
})
​
2.后代选择器和find方法
 $(function(){
    var $a=$("p a")//找到p标签下所有的a标签
})
​
find方法
  var $a=$("p").find("a");//两者等同
  
3.通配符选择器
$(function(){
  var $all=$("*")/获取所有的元素  
})
​
4.子元素选择器和children方法
$(function(){
  var $divs=$(".box>div")//找到所有.box下的div直接子元素  
})
​
children方法
var $children=$(".box").children("div");//两者等同
​
5.next选择器和next方法
$(function(){
  var $item=$(".box .item2+.item3")  //选择指定元素下一个兄弟
})
​
next方法
  var $item=$(".box .item2").next(".item3")//两者等同
  
6.nextAll选择器和nextAll方法
  $(function(){
    $divs=$(".item2~div")//找到指定元素后的所有兄弟
})
​
nextAll方法
   $divs=$(".item2").nextAll("div")//两者等同
   
7.prev方法和prevAll方法
$(function(){
  var $div=$(".item2").prev("div")//找到指定元素前一个兄弟元素  
})
​
$(function(){
  var $divs=$("item2").prevAll("div")//找到指定元素前面所有兄弟元素  
})
​
8.sibling方法
$(function(){
  var $divs=$(".item2").siblings//除指定元素外所有兄弟元素  
})

1.基本过滤选择器
  var $first=$("div:first");//所有div元素的第一个div
  var $last=$("div:last");//所有div元素中最后一个div
  var $not=$("div:not(.box1)")//div中class名不是box1的元素
  var $even=$("div:even")//索引为偶数的div
  var $odd=$("div:odd")//索引为奇数的div
  var $eq=$("div:eq(1)")//索引等于1的div
  var $gt=$("div:gt(1)")//索引大于1的div
  var $lt=$("div:lt(3)")//索引小于3的div
  var $header=$(":header")//获取所有的标题元素
  var $focus=$(":focus")//获取当前获得焦点的元素
 
2.内容过滤选择器
  $("div:contains(文本)")//选取含有文本内容的元素,如果div的子元素满足,那么div也算.
  $("div:empty")//选取没有子元素的div元素
  $("div:has(item2)")//选取有后代是item2的div元素
  $(":parent")选取有子元素的div元素
  
3.可见性选择过滤器
  $("div:visible") //选择所有可见的元素
  $("div:hidden") //选择所有不可见的元素
  
  
4.子元素过滤选择器
  $(":nth-child(index/even/odd/equation)")
 匹配其父元素下的第N个子元素或奇偶元素
 $(":first-child")//第一个子元素
 $(":last-child")//最后一个子元素
 $(":only-child")//如果父类元素只有一个子元素就返回

1.获取和设置元素的内容
    三个方法
    1.html()  ==  ele.innerHTML
    2.text()  ==  ele.innerText
    3.val()   ==  ele.value
2.获取修改删除元素的属性
    attr()不是布尔值的建议用这个
    prop()属性值为布尔值的建议用这个
    removeAttr()
    removeProp()
3.操作class属性
    1.可以使用attr()和prop()直接操作class属性
    2.addClass()追加class
    3.removeClass()移除class
    4.toggleClass  切换class
    5.hasClass    判断是否有指定的class
4.操作css属性
    css()方法既可以获取内部样式,也可以获取外部样式
    1. 如果只传入一个字符串，则是获取匹配的第一元素的这个字符串表示的属性的值。
       css("backgroundColor")获取背景色。
    2. 如果传入的是一个数组，则可以获取匹配的第一个元素的多个属性值。
    3. 如果传入两个参数：第一个参数是一个字符串，第二个参数是字符串或者数字。则表示设置所有匹配元素的属性的值。
    4. 如果传入的是一个js对象，则表示同时设置多个css属性和值

与尺寸相关的方法
1.height(),width()
  获取到的值不带单位.不包括padding和border,并且也可以设置宽和高
2.innerWidth(),innerHeight()
  获取到包含padding但不包含border的值
3.outerWidth(),outerHeight()
  获取包含padding,border 的宽和高,如果传入true,则也会包含margin,默认不包含.

与位置相关的方法
1.offset()方法//元素相对于当前文档的偏移量,返回值是一个对象
2.position()方法//元素相对于参照定位元素的偏移量,只能获取不能设置
3.offsetParent()方法//获取与当前元素距离最近的已经定位的父容器
4.scrollLeft(),scrollTop()方法//获取某个元素的滚动条距离上端和左端的滚动的距离.