jQuery

定义：

jQuery是一个快速、小巧、功能丰富的JavaScript库

JQuery与原生JS

  • 原生JS不能添加多个入口函数
  • 原生JS有兼容性问题
  • 原生JS容错率差
  • JQ代码简洁

引入jQuery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

JQuery

  1. JQuery 文件结构
  • JQ其实是一个自执行的js函数，由于引入了js（JQ）文件，浏览器就会执行引入的文件中的代码，
  • ==》JQ代码被执行（为window添加$等属性）
  • $===jquery //true [function]
  1. 入口函数
$(document).ready(function(){
	console.lgo("入口函数，写法一");
});
$(function(){
	console.log("入口函数，写法二")
});
//原生Js入口函数：
window.onload=function(){

}

JQuery 可以写多个 ， 原生js中的入口函数只能有一个
执行时期不同：JQ的入口函数先于原生js入口函数

  • JQuery入口函数要等待页面上的dom树加载完成后在执行
  • window.onload要等待页面上的所有资源（dom树，外部css,外部js，...）加载完毕后再执行
  1. $ 简介
  • $ 是一个函数
  • 如果传递的参数为匿名函数 ： $(function(){})入口函数
  • 如果传递的参数为字符串 ： $('div') , $('#div') 创建标签 ，选择器
  • 如何传递的参数为dom对象: $(docuemnt.getElementById('div')) 将dom对象转为JQ对象

dom对象：原生JS选择器获取到的对象 （dom对象只能调用dom属性或方法 ，不能调用JQ的属性，方法）
JQ对象 : 通过JQ选择器获取到的对象，（JQ对象只能调用JQ的属性或方法）
JQ对象是一个 伪数组， 是dom对象的一个封装集，==>通过下标获取的对象为dom对象(等同于> get方法：$('div')[0] == $('div').get(0) //true )

JQ选择器

1. 基本选择器

名称 用法 描述
$("#id") id
$(".class") class
$('div') 标签
$(".xx , .ss") 并集
$(''h1#ee'') 交集（xx 与 #ee） 可以3个及以上交：#('.a#bdiv')

2. 层级选择器

名称 用法 描述
$('div > .xx') 子代中class为xx的元素
$('div .xx') 后代中.xx

3. 过滤选择器

名称 用法 描述
:eq(index) $('div:eq(0)') 获取 div中索引为0的元素
:odd $('li:odd') 获取 li中索引为偶数的元素
:even $('li:even') 获取 li中索引奇数的元素
:not() $('li:not(#start)') ...排除id为start的元素
4. 筛选选择器（方法）
名称 用法 描述
children(selector) $('ul').children('li') 后代选择器
find(selector) 相当于子代选择器
siblings(selector) 兄弟节点
parent() 父亲
eq(index) 索引
next() 下一个兄弟节点
prev() 上一个兄弟节点

JQ常用方法

  1. text() // 获取、设置 文本

    • 无参 ： 获取文本
    • 参数（字符串）：会覆盖原来的内容 （如果参数中有标签，是不会解析标签的）

    包含了多个dom的JQ对象通过text()获取、设置文本，会将所有的dom元素的文本获取到或都设置（隐式迭代）

  2. css() // 获取、设置 样式

    • 参数为样式名 ： 获取该样式的值
    • 参数为样式名和样式值 ： 设置样式(为行内样式) （单样式）
    • 参数为对象 ： 如果该对象的属性为样式名 ， 值为属性值 也可以设置样式（多样式）

    获取包含了多个dom的JQ对象的样式时，只能获取的第一个元素的样式值
    设置包含了多个dom的JQ对象的样式时，每一个元素都会设置同样的样式

  3. val() //获取、设置表单元素的值

  4. attr() //属性操作

    • 参数为属性名-->获取该属性值
    • 参数为属性名属性值（ 参数为对象 ）-->添加设置属性

    获取没有该属性的元素的该属性是 为 undefined

  5. removeAttr() //移除属性参数为属性名 （移除多个属性是 属性名之间用空格分开）

  6. prop() //获取属性值

    在JQ1.6之后，对于checkd、selected 、disabled、这类的boolean属性来说，不能用attr方法，只能用prop方法

JQ其他方法

方法 描述 作用
index() 返回整数类型 获取元素在兄弟中所处的位置
addClass('类名') 可以同时添加多个类，类名之间空格分开 添加类
removeClass('类名') 也可以移除多个类同上，空参数表示移除所有类 移除类
hasClass('类名') 布尔类型，判断元素是否有某个类 判断类
toggleClass('类名') 如何元素有某个类，就移除该类。没有则添加 切换类
show() ...
hide() display:none
width(),height() 获取，设置元素的宽高（不包括padding,border，margin）
innerWidth(),innerHeight() 获取，设置元素的宽高（包括padding）
outerWidth(),outHeight() ...包括padding ,border 参数为true时包括margin
offset() 获取元素距离document的位置 返回包含了top,left属性的
position() 获取元素距离最近的有定位的父元素的位置 返回包含了top,left属性的对象
scrollTop() 获取被滚动卷曲的部分的高度
scrollLeft() 获取被滚动卷曲的部分的宽度

JQ事件

事件 描述 冒泡
mouseover 鼠标移入到选取的元素或其子元素上时，触发事件 事件冒泡
mouseenter 鼠标移入到选取的元素时，触发事件 事件不冒泡
mouseout 鼠标移出所选取的元素或其子元素时，触发事件 事件冒泡
mouseleave 鼠标移出选取的元素时，触发事件 事件不冒泡

JQ中给同一个元素注册相同的事件时，后一个不会覆盖前一个事件

  1. 注册事件

    • 简单事件绑定 （click，mouseover，mouseenter。。。。）

      简单事件绑定不支持同时注册，和动态注册

    • bind方式注册事件

      支持同时注册，不支持动态注册

      $('div').bind({
        mouseenter : function{...},
        click 	: function(){...}	//同时注册	
})

    • delegate委托事件注册 （支持同时注册，动态注册（事件冒泡）

    • on事件注册

      	$('div').on('click',function(){....})   //简单事件注册（不支持动态注册）
	$('body').on('click','div,span',function(){....})//委托注册（注册动态注册）

  2. 事件解绑

    • unbind()
    • nudelegate()
    • off()
    	$(selector).off()	//解绑该元素的所有事件
	$(selector).off('click') //解除该元素上的点击事件

  3. 事件触发: trigger()

    • 触发自定义事件
    • 手动（触发器）触发事件
    	$(selector).trigger('selector的事件名')

JQ动画

  1. show() , hide() , toggle()

    • 参数1 ： 动画执行时间
    • 参数2 ： 回调函数
    • 无参无动画

  2. slideDown() , slideUp() , slideToggle()

    • 参数1 ： 动画执行时间
    • 参数2 ： 回调函数
    • 无参有动画 （参数1默认为：normal（400ms））

  3. fadeIn() , fadeOut() , fadeTOggle()

    • 参数1 ： 动画执行时间
    • 参数2 ： 回调函数
    • 无参有动画 （参数1默认为：normal（400ms））

    fadeTo(time,To_Opacity) //To_Opacity 为 动画结束状态的透明度

  4. 自定义动画

    • animate(prop,speed,easing,callback)

    prop: 必选 需要做动画的属性的对象 eg：

  5. 动画队列

  • stop(参数1，参数2) 参数一: 是否清除动画队列，参数二：是否跳转到最后的动画状态

$(function(){

$(function(){	
			$('button').eq(0).click(function(){
				$('div').show(2000).hide(2000);	
			})
			$('button').eq(1).click(function(){
				// $('div').stop(true,true);			//直接跳转到最终状态
				// $('div').stop(false,true);				//直接跳转到最终状态
				// $('div').stop(true,false);				//暂停到目前的动画状态
				$('div').stop(false,false);				//暂停到目前的动画状态		
                //默认无参为false，false
			})	
		})

jQ节点

  1. 创建节点

    • html()

      • 无参 ： 获取类容
      • 有参 ：设置内容，可以解析内容中的标签 会覆盖原来的内容

    • $()

      • 该方法创建的节点需要插入到网页中

        var $link = $('<a href="http://baidui.com">百度一下</a>'); //创建节点
$('body').append($link);		//插入节点

  2. 插入节点

    方法 调用者 描述
    append() 剪切 父元素 追加，作为最后一个子元素添加
    prepend() 剪切 父元素 作为第一个子元素添加
    before() 兄弟元素 作为兄弟元素添加其前面
    after() 兄弟元素 作为兄弟元素添加其后面
    appendTo() 子元素 子元素调用，作用同append

  3. 移除节点

    • empty() 清空节点的内容（包括其嵌套的标签--子元素）
    • remove() 移除节点及其子元素

  4. 克隆节点
    clone(参数1) //参数为true：克隆事件 , 参数为false：不克隆事件

<body>
	<button>start</button>
	<button>stop</button>
		<ul>
			<li>1</li>
			<li>2</li>
		</ul>
	<script>
		$cloneUl = $('ul').clone();
		$('ul').after($cloneUl);
	</script>
</body>
posted @ 2020-01-03 09:16  Tolbert  阅读(187)  评论(0)    收藏  举报