在学习 jQuery

jQuery

jQuery中的$本身是个函数，相当于jQuery，执行后返回一个jQuery对象，类似于questSelectorAlly

div=$("div")    // 得到的是一个jQuery对象，本质上也是个对象，存了所有的div标签。
$("div").text(1)    // 把所有的div内容都设为1
// jQuery对象不能使用DOM方法，js方法都不能用，但jQuery有自己的方法，它把js里的那些方法自己重写了一遍
// 获取jQuery对象中的第n个DOM对象$("div")[n]或者$("div").get(n)
// 将jQuery对象转换为数组对象    Array.from($("div"))
// 将DOM对象转换为jQuery对象    $(div)  div就是已经获取到的DOM对象

一些方法和过滤器(很多)

$("div")  $(".div")  $("#div")    // 获取所有div  class是div的标签  id是div的标签
$("div.div")    // 获取div，这个div的class是div1
$("div .div")    // 获取div下所有class是div1的元素
$("div~.div1")    // 获取div后面所有的class是div1的兄弟元素
$("div>.div1")    // 获取div下class是div1的子级元素（当前Div元素的第一级元素）
$("ul>*")=$("ul>")    // 寻找ul所有子代
$(".div1").find("div")=$(".div1 div")    // 所有
$("div").children()=$("div>")
$("#div1").next()=$("#div1+*")    // id是div1的后面第一个兄弟元素
$("#div1").nextAll()=$("#div1~*")    // id是div1的后面所有兄弟元素
$("#div").prev()    // id是div1的上一个元素
$("#div1").prevAll()    // id是div1的上面所有兄弟元素
$("#div1").prevUntil("#div2")    // id是div2的这个元素到前面id是div2这个元素之间的所有元素
$("#div1").sibling()    // div1的所有兄弟元素
$("li:first")    //获取所有里li的第一个li
$("li:firsr-child") // 找到li的父元素下的第一个子元素如果是li就选中
$("li:first-of-type")		//  找到li的父亲下的第一个li
$("li:nth-child(n)")  // 找到li父元素下第n个元素是li的元素选中，不是li就不选中
$("li:only-child(n)")  // 找到只包含一个li为子元素的元素
$("li:nth-of-type(n)")  // 找第n个li
$("li:nth-child(odd)")  // 奇数
$("li:nth-child(even)")  // 偶数
$("li:not(**)")  // 满足不是**的li
$("li:odd")		// 直接奇数
$("li:even")		// 直接偶数


$("li:eq(2)")  // 选择jQuery对象列表中第二个jQuery对象
$("li:gt(2)")  // 选择li列表中下标大于2的所有jQuery对象 
$("li:lt(4)")  //  选择li列表中下标小于4的所有jQuery对象
$(":header")  // h1-h6的所有内容
$(":animation")  // 所有动画的元素
$("focus")  // 所有聚焦内容

// 在使用的时候建议直接使用方法而不是过滤器    因为使用方法效率会更高
$("li:eq(2)")===$("li"):eq(2);  同理，first、not这些

$("div:empty")  // 没有内容的div 
$("div:has(.div)")  // 查看后代元素中包含元素.div的div
$("li:contains(2)")  // 查找有内容为2的li

// parent
$("div1:parent")  // 找一个元素，这个元素的class是div1，并且有内容
$(".div1").parent()  // 找到.div1的父元素
$(".div1").parents()  // 找.div1的所有父级元素


$(":hidden")  // 不可见元素  比如title、mate、script这些都属于不可见元素。除此之外，设置了display:none的不占位隐藏也是不可见元素。像visibility:hidden这种就是占位隐藏，不会被获取到
$(":visible")  // 可见元素


$("li").is(".li0")  // 判断li中是否有.li0，还可以判断id、属性这些。返回值是true、false，不能连缀
$("li").hasclass(".li0")  // 只能判断class，作用和is一样，但效率更高


$("li").slice(0,4)  // 获取从第0个到第4个的所有li  [0,4]

jQuery遍历和内容

$.each(arr,function(index,value){})  // 遍历数据
$.each(obj,function(index,value){})  // 遍历对象
$.each(divs,function(index,value){})  // 遍历HTML列表
$.each($("div"),function(index,value){})  // 遍历jQuery对象

$("div").text()  // 获取返回 所有div文本内容组成的字符串
$("div").text(function(index,value){
  	return value+value;  // 把原来的内部内容加一倍再填进去
})

$("div").html()  // 仅获取第一个div的innerHTML内容  可以在这里设置，是设置所有div

$("input").on("input",function(){
  // 只能获取一个正在输入的input
  console.log($(this).val());  // 在输入时打印输入内容
})
$("input").val(1)  // 把所有input全设为1

jQuery中属性

div属性包括三个：

1.attr 属性 2.data 数据属性 3.prop 对象属性

$("div").attr("a")		// 获取第一个div的a属性
$("div").attr("b",2)	// 每个div都加上一个b=2的属性
$("div").removeAttr("a")  // 删除所有div中的a属性
$("div").attr("a",function(index,value){
  return index+10;		// 把所有div的a属性值都设为自身下标值加10
})

$("div").attr({  // 把所有的a属性值都设为10，所有的b属性都设为20
  a:10,
  b:20
})

$("div").attr({  // 给不同的a、b设置不同的值
  a:function(index,value){
    return index+10;
  },
  b:{
  return index*10;
	}
})

// prop  设置属性
$("div").prop("abc",10)  // prop添加属性的时候加的并不是标签属性，在标签上是看不出的，但是下次$("div").prop("abc")获取的时候可以获取到
// 如果是直接$("div").abc=10,是给所有div加了个abc属性，值是10    不过在下次获取的时候，$("div").abc并不能获取到我们设置的10，因为每次使用$("div")的时候其实都是新建了一个jQuery对象，并不是原来的那个，所以我们第二次$("div").abc获取到的是undefined    如果使用prop就不会有这个问题，prop直接加到DOM属性上了
$("input").prop("type","password")  // 修改type属性
$("input").prop("value","1234")  // 修改value值
$("input").prop("checked",true)  // 修改input的checked属性为选中
$("input").prop({    // 设置多个
  a:1,
  b:2
})
// 还可以设置多个，像前面attr一样写就行
//  removeProp 删除     只能删除对象属性，不能删除标签属性

$("input").data("disabled",true)  // 只是加一个数据值，并不影响标签的显示和特征
$("input").data("id",1)
// removeData  删除data

​ jQuery中$在使用时并不会改变原来的DOM，而是会在原DOM基础上生成一个新的映射jQuery对象。所以每次使用$获取到的对象都是不同的

jQuery和css

$("div").css("width:50px");  // 设置行内样式宽度为50px
$("div").css("width")  // 获取div的width  即可以获取到行内样式的宽，也可以获取到计算后的css样式，获取到的是一个字符串
// css不能删除，可以用""来覆盖
$("div").css({    
  // 在这里设置样式的时候加不加单位都是没有影响的，会自动进行修正
  width:100px,
  height:30
})

$("div").css({
  // 可以设置不同的
  width:function(index){
    return (index+5)*20;
  }
  height:function(index){
  return (index+10)*100
	}
})
$("div").css(["width","height"])	// 获取第一个div的多个属性值

// 增加claa   addclass()  同名跳过，不会重复
// 删除class  removeclass() 
// toggleClass  做切换，有class就删除，没有class就加上

$("div").width()	// 可以获取到class以及行内样式中计算后的width  得到的是数值而不是字符串    可以在后面写数值，意为设置宽度
// 同理，也可以在后面括号里放入函数，来设置不同的宽度

$("").innerWidth  //  内部宽度，会加上padding    可以写数据来设置，如果有padding的话，我们设置的这个数值其实就是内容宽度加上padding之后的    和box-sizing:border-box 是一个意思
$("").outerWidth()  // 宽度，这个是加了margin和border之后的  同理，也可以写数值进行设置，同样，设置的值等于加了border和padding之后的
$("").outerWidth(true)  // 获取到加了margin、padding和border之后的数值  只能获取不能修改

$("").offset()  // 获取到相对于页面左上角的数值  可以修改
$("").position  // 相对于定位的父容器的数值  可以进行设置  本质上就是它的定位数值    只能获取，不能修改
// 想要修改定位值，使用css修改
$("").css({
  left:30px,
  top:50px
})
$("").scrollTop()
$("").scrollLeft()