JQuery(一)

JQuery(一)

JQuery的精髓 链式操作、循环操作等

DOMContentLoaded 与 $.ready() 几乎相等

window.onLoad 最后

Jquery 选择元素的方法

• .get() 填元素索引 取出的是已选中 的所有元素中的该元素 并 且为原生
  * .eq() 与*get()*不同的是 如果没有传入返回空 并且返回的是jQuery 对象
  * .find() 在原对象基础上 查找对象 可传入任意选择器
  * .filter() 用于过滤 不能往下查找 字符串可以填 even odd function(index,ele){}
  * .not() 与 filter() 相反
  * .is() 返回 bool 调用者是否有某元素
  * .has() 筛选 里面有什么的元素

get() 与 eq()相比使用频率更低 因为获取到的是原生对象

.add() 集中操作 .end()回退操作

复习一个原生知识点

//可以将类数组变为数组
 Array.prototype.slice()  
 
 [].slice.call()

prveObject
所有JQuery对象都会带有这个属性里面藏着该对象的上一级 是JQuery 链式操作实现的本原所在

JQuery DOM操作

.css()
可以取css值 也可以设置css值
设置时可以填入
css(‘width’,100)
也可以
css({width:100,height:100})

由于取值联想到了之前的获取style样式的一个公共方法

function getStyle(dom,attr){
	//用于兼容IE
	if(dom.currentStyle){
	  return dom.currentStyle[attr];
	}else{
	  //此处getComputedStyle(,null)第二个参数来填写伪类元素
	  return window.getComputedStyle(dom,null)[attr];
	}

}

.attr()

基于 原生js中的 setAttribute 和 getAttribute

用于取得元素中的属性值和设置值

取值： $(’.wrapper’).attr(‘class’);
设值: $(’.wrapper’).attr(‘class’,‘abc’);

但是 attr 取到的部分特性值 非真实的
如: selected checked disabled等值时
所以需要使用 prop()

prop()

用于取得特性值和设置

val()

用于取得form表单中的value值十分方便

也可以传入function进行赋值

function(index,oldValue){
	return newValue
}

需要注意的是 在使用prop() 或 val() 改变input value时 行内元素上显示的value不会变化 但是实际真实value值已改变无伤大雅

 *attr*    用于设置或取得属性值    *prop*  用于设置或取得特性值         *val*   用于设置或取得表单value值

另外还有两个不常用的方法
serialize() 获取form表单中的全部值 json格式
serializeArray() 获取表单中的全部值数组形式

html()
原理更接近 innerHtml
会取得元素的值字符串形式
如果调用方法的是一组元素则会返回该元素的第一个元素的html值

但是在赋值时
却会全部都赋值
也可以传入一个function来赋值
例如：

	
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
		//set value
		$('ul li').html('9')
		 // result
		      // <ul>
		      //  <li>9</li>
		      //  <li>9</li>
		      //  <li>9</li>
		      // <li>9</li>
		      //  <li>9</li>
		      //  </ul>  
	      
		//read value 
		$('ul li').html()
		//return  '1'
		//Because it returns only the first value

		//  And you can pass in a function 	
		//  For example
		$('ul li').html(function(index,ele){
         return index == 2 ? 'I modified it here' : ele
         //if you return ele then value will not change  
        })
        //result
         // <ul>
		      //  <li>9</li>
		      //  <li>9</li>
		      //  <li>I modified it here</li>
		      //  <li>9</li>
		      //  <li>9</li>
		 //  </ul>  
		
	</script>
              

text()

与html()相似不过取出的是文本值
也可以传入function 进行值的更改
但设值时 即使写 HTML标签也依旧会被当做字符串来处理

size()

获取对象的长度实际与*.length* 并无差异

在复习删除类名等方法之前先复习

HTML5 API classList

在老IE不支持

可以注意的是该api的四个方法

.add() 用于添加类名 一次只能添加一个
.remove() 用于删除类名 如果不传参则无效 传入错误类名则报错
.contains() 判断是否有此类名
.toggle() 如果有该类名则删除 没有则添加

JQuery 类名操作

addClass() 可以直接在其中传入多个类名,中间用空格隔开如"aaa bbb ccc" 也可直接传入function(index,ele)

removeClass() 删除指定的class 如果不传入参数则删除该元素所有类名

DOM增删改查操作

next()
获取该元素的下一个兄弟元素
可以传入过滤条件 标签选择器 odd even

prev() 获取该元素的上一个兄弟元素

nextAll() 获取该元素的所有下面的兄弟元素 可以传入过滤条件 标签选择器 odd even

prevAll()

nextUntil(‘h1’,‘p’)
传入条件:
1. 到某某为止前的所有兄弟元素
2.到某某为止前的所有兄弟元素中符合第二个条件的元素

prevUntil()

siblings()

获取所有的兄弟节点 可传入筛选条件

parent()

查找上一级元素 可填入过滤元素

parents()

查找上级元素如果不传参 则获取所有上级 可以传入过滤节点

closest()

离你最近的满足条件的父级 从自己开始找 而 parents 忽略自身,如果不传参则什么都没有

offsetParent()

获取最近的定位元素 符合条件的父级

slice()

截取元素 包含左边不包含右边 1,6 则为截取第1位-第5位

---

JQuery对象才会发生位置改变

---

insertBefore()

把调用的元素放到传入 的元素前

before()

把传入的元素放到调用的元素前 只能传入JQuery 对象

insertAfter()

把调用的元素放到传入 的元素后

after()

把传入的元素放到调用的元素后 只能传入JQuery 对象

appendTo()

把调用的元素添加到传入的元素里 的最后面

append()

把传入的元素添加到调用的元素里 的最后面

prepend()

把传入的元素添加到调用的元素里 的最前面

prependTo()

把调用的元素添加到传入的元素里 的最前面

remove()

剪切元素后事件也会清空

detach()

剪切元素后事件不会清空

  $("<div></div>")
  //  可以直接填入标签以创建元素 

• wrap()
  在该元素的外部包裹一层元素
  可以直接传入字符串html
  模板 $('.demo').wrap('<div></div>')
  也可以传入 原生dom 对象
  或者JQuery对象在处理循环操作时还可以传入function()

wrapInner() 给元素的里面的元素包裹上一层元素

wrapAll() 给所选所有元素添加一个父级元素

unwrap() 删除选中的元素的父级 最多删到父级为body时不再删除