jQuery常用属性、方法、操作DOM以及扩展方法

改变jq符号：

//从此zz就代表$
let zz = $.onConflict()

网页加载

1.网页里所有资源加载完成：

$(()=>{})//可以走很多遍
window.onload = ()=>{}//只走一遍

2.网页中DOM结构加载完成：

window.addEventListenter('DOMContentLoaded',()=>{})

选择器

基础语法：$(seiector).action()

1.基本选择器：

标签、类、id、并集、交集、全局、$(’*’)

2.层次选择器：

后代（空格）、子代（>）、第一个兄弟（+）、所有兄弟元素（~）

3.属性选择器：

• $(’[class]’)
• $(’[class=hot]’)
• $(’[class!=hot]’)
• $(“a[herf ^= ‘www’]”)

4.基本过滤选择器：

1. :frist（css3中： :first-child）
   选第一个元素
   例：

	$('li:frist')

2. :last（css3中： :last-child）
   选最后一个元素
3. :not()
   除去写进去的元素
4. :even
   选索引为偶的元素
5. :odd
   选索引为奇的元素
6. :eq(1)
   选索引=1的元素
7. :eq(1)
   选索引=1的元素
8. :gt(1)
   选索引>1的元素
9. :lt(1)
   选索引<1的元素
10. :header
    所有标题元素
11. :focus
    选取当前获取焦点的元素

5.基本过滤方法：

1. filter(‘a’)
   选出a的元素
2. not(‘a’)
   选出除去a的元素
3. has(‘a’)
   选出包含a的元素

6.index()索引，当前元素在所有兄弟元素的位置，从0开始。

特殊符号的转义：

<id = 'id#a'>		$('#id\\a')
<id = 'id[2]'>		$('#id\\[2\\]')

class操作：

1. addClass
   添加class
2. removeClass
   删除class
3. toggleClass
   有则删除class，无则添加class
4. hasClass
   有返回true，无返回false

内容操作：

• html()
  获取或设置内容（相当于js中的innerHtml）
• text()
  获取或设置不含标签的内容（相当于js中的innerText）
• val()
  获取或设置值（适用于表单元素）

属性操作：

1. css(‘color’);//获取属性
2. attr(‘data-age’);//获取或设置自定义属性
3. data();//获取或设置自定义属性
4. $(’[data-age]’).html();//获取自定义属性
5. prop()；//获取或设置原生属性

			// 给jquery扩展的实例方法
            $.fn.extend({
                red(){
                    this.css('color','red')
                },
                dian(){   //大于10位数按......显示
                    let str = this.html()
                    if(str.length >10) {
                        let result = ''
                        result = str.slice(0,10) + '......'
                        this.html(result)
                    }
                }
            })

            // 给jquery扩展静态方法
            $.extend({
                yellow() {
                    console.log('yellow')
                }
            })

            $('.demo').dian()
            $('.demo').red()
            $.yellow()

            $('.demo').css('color');//获取属性
            $('.demo').attr('data-age');//获取自定义属性
            $('.demo').data('age');//获取自定义属性
            $('.demo').data();//获取自定义属性

            $('[data-age]').html();//获取自定义属性

            $().attr('data-a',10)//获取或设置自定义属性
            $().prop('checked')//获取或设置原生属性

DOM节点操作

1. 创建节点：

$('<div></div>')
$('<h1></h1>')

2. 添加节点：

   1、内部添加：
   $(a).append（b）把b添加到a里的末尾
   $(a).appendTo（b）把a添加到b里的末尾
   $(a).prepend（b）把b添加到a里的开头
   $(a).prependTo（b）把a添加到b里的开头

   2、外部添加：
   $(a).insertBefore(b）把a添加到b外的前
   $(a).insertAfter(b）把a添加到b外的后
   $(a).before(b）把b添加到a外的前
   $(a).after(b）把b添加到a外的后

3. 删除节点
   remove() 删除整个节点，不保留元素的绑定事件
   detach() 删除整个节点，保留元素的绑定事件
   empty() 清空节点内容

4. 替换节点
   $(a).replaceWith(b) 把a节点替换为b节点
   $(a).replaceAll(b) 把b节点替换为a节点

5. 复制节点
   clone(boolean) 当boolean为true时复制事件处理，为false时不复制事件处理

6. 查找节点
   find() 查找子节点
   child() 查找子代节点

7. 绑定事件

		<button class="btn">add</button>
		$('.btn').click(function(){
            $('body').append(`<button class="btn">add</button>`)
         })  //添加出来的节点并没有继承原来的方法

        $(document).on('click','.btn',function(){
            $('body').append(`<button class="btn">add</button>`)
        })  // 委托给父级 ，添加出来的节点继承了原来的方法

8. 动画效果
   1、hide(1000) 隐藏1秒
   show(1000) 显示1秒
   toggle() => hide()+show() 在隐藏和显示之间切换
   2、fadeOut() 淡出
   fadeIn() 淡入
   fadToggle() =>fadeOut() +fadeIn()
   3、slideUp() 向上折叠
   sildeDown() 向下延伸
   sildeToggle() =>slideUp()+sildeDown()
   4、animate({‘width:’ ’ ’，‘height:‘ ’ ’},1000)
9. js转jq

		var = mybox = jQuery(box);
		mybox.html('ccc'); 

11. jq转js

	var mybox = $('').get(1);
	mybox.innerHTML = 'hi';

选择元素

• 选择器：基本、层次、属性、伪类
• 选取子元素：chirlden()
• 选取后代：find()
• 兄弟元素：
  prev()上一个兄弟，
  next()下一个兄弟，
  prevAll()前面所有兄弟，
  nextAll()后面所有兄弟，
  siblings()所有兄弟元素（出当前元素外）
• 父元素：
  parent() 当前元素的父级元素
  parents() 当前元素所有上级元素，可以添加一个参数，这个参数就是筛选功能
  offestParent() 当前元素最近的那个有定位的上级元素

获取(设置)元素的宽度高度：

• width() width(‘100’)设置宽为100，默认px
• height()
• innerWidth() 自身宽+内边距（相当于js中的clientWidth）
• innerHeight() 自身高+内边距
• outerWidth() 自身宽+内边距+border（相当于js中的offestWidth）
• outerHeight() 自身高+内边距+border
• outerWidth(true) 自身宽+内边距+外边距+border

元素的位置：

• offest()元素距离浏览器边框的距离，这个方法有两个属性（top、left）,此方法只对可见元素有效。

   		$('p').offest().left
  

• position() 方法返回当前元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
  (js中offestLeft/Top,当前元素到最近的上级元素的距离，包括margin)
  (jq中当前元素相对于父元素的位置，不包括margin)

• scrollTop() 滚动条上下，也可以设置（scrollTop(100)）
  scrollLeft() 水平滚动条
  （js中document.documentElement.scrollTop/Left）

jq的扩展方法

 			<div class="demo">11asdadassdaddww1</div>
 			
			// 给jquery扩展的实例方法
            $.fn.extend({
                red(){
                    this.css('color','red')
                },
                dian(){   //大于10位数按......显示
                    let str = this.html()
                    if(str.length >10) {
                        let result = ''
                        result = str.slice(0,10) + '......'
                        this.html(result)
                    }
                }
            })

            // 给jquery扩展静态方法
            $.extend({
                yellow() {
                    console.log('yellow')
                }
            })

			$('.demo').dian() //11asdadass......
            $('.demo').red()
            $.yellow()