jQuery

最新推荐文章于 2023-06-29 20:28:49 发布

逐渐头冷

最新推荐文章于 2023-06-29 20:28:49 发布

阅读量704

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/java_vava2/article/details/114783081

一、jQuery

1.1 $()

使用 $(" . b o x ") 或者$ ("#box")获取元素
选用JQ以后不能直接使用原生JS对象的方法

1.2 jQuery与原生对象的转换

jQ转原生：直接利用数组下标

 $ps = $("p")[0]

原生转JQ：加$()

p = document.getElementTagName("p")[0];
$(p).css("background-color","skyblue")
$(p).html("使用jQ修改html内容")

1.3 jQuery选择器

1.3.1基础选择器

$("*")
$(".box")
$("#box")
$(“p”)

1.3.2高级选择器

$(".box p ") 等

1.3.3表单选择器

$("input:enable").css("background-color","red")
$("input")//选中所有的input标签
$(":checkbox")//选中所有的多选框

1.3.4 JQ新增选择器

筛选选择器

$("p:first")
$("p:last")
$("p:eq(2)")//下标为2，下标从0开始
$("p:gt(2)")//下标小于2 的
$("p:odd")//下标为偶数的 even为奇数
$("p:not(:eq(3))")//下标不是3的

筛选方法

$("p").first()//第一个p标签
$("p").last()
$("p").eq(4)//下标为4的p标签

二、 jQuery基础语法

2.1html()方法和text()方法

相当于原生js中的innerHtml属性，用来获取或设置标签内部内容。

//获取内容
var $box = $(".box")
console.log($box.html())//获取到的内容带标签
console.log($box.text())
//修改内容
$box.html("<p>修改html标签内容</p>")//标签也可以添加到
$box.text("<p>修改html标签内容</p>")

2.2val()方法

html()方法和 text()方法智能获取单标签属性内容，双标签属性用val()方法获取。相当于value属性。
option标签和select标签的val()方法获取到的是value属性不是标签之前的内容
修改option的内容改变的是value值,修改select的内容改变的是标签选项

2.3 attr()方法设置或者获取标签属性值

设置属性值需要传入两个参数,获取属性值(包括内置属性和自定义属性)需要一个参数.

 var $pic = $(".pic")
$pic.attr("src","***/...jpg")//设置属性需要传入两个参数
console.log($pic.attr("alt"))//获取属性值需要一个参数

2.4 removeAttr()删除属性

$pic.removeAttr("hobby")//删除自定义属性

2.5 prop()方法获取表单标签

var $btn = $(".btn")//获取按钮元素
var btn = document.quertSelector(".btn")//通过css获取元素
console.log(btn.disabled)//   用原生方法返回值返回的是true
console.log($btn.attr("disabled"))//获取到的是disbled
//可以将获取到的disabled转为true
console.log($btn[0].disabled)
//或使用jQuery中提供返回值为true的方法prop()
console.log($btn.prop("disabled"))
//设置属性
$btn.prop("disabled",false)//将disabled的值设置为false

2.6 css()方法

获取属性值:
获取到的属性值时最终加载的属性值
设置对象的css属性

var $box = $(".box");
//获取box的宽度属性值,
console.log($box.css("width"))/200px
//设置属性值
$box.css("width",+=200)//兼容字符串,数值,运算符
//支持属性驼峰命名和间隔符
$box.css("backgroundColor")//或background-color
//支持多条属性以对象的方式书写
$box.css({
    "width":200 ,
    "heigth":100
})

2.7操作类名:值操作参数部分的类名,不影响原有的其他类名

1.addClass()添加类名
2.removeClass()删除类名.参数为空删除所有类名
3.toggleClass()类名切换

$box = $(".box")
$box.addClass("demo")
$box.removeClass("demo")
$box.toggleClass("demo")//之前有该类名则删除,如果没有则添加类名

2.8 hasClass()方法

判断类名是否存在,返回true或false
console.log($box.hasClass("demo"))

2.9 is()方法

参数：选择器/jQuery对象 / DOM元素 / 函数
作用：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回’false’

//判断复选框是否被选中
$checkbox = $(".checkbox");
console.log($checkbox.is(':checked'));//若选中返回true

三、事件方法

3.1 jQ新增事件类型

3.1.1 mousesenter :鼠标进入元素触发事件

$box.mousesenter(function(){
  consoloe.log("mose-in");
})

3.1.2mouseleave 鼠标离开触发事件

$box.mouseleave(function(){
  console.log("移开鼠标")
})

以上两种方法没有事件冒泡，mouseover和mouseout有事件冒泡

3.1.3 hover()方法：对 mousesenter 和 mouseleave 合并书写

$box.hover(function(){
    //鼠标移入函数
    $box.addClass("demo")
},function(){
    //鼠标移出函数
    $box.removeClass("demo")
})

3.2 节点关系操作方法

原生DOM操作中,this关键字指向触发事件的事件源,在jQ中将this关键字传递给$()得到自己的jQ对象
~``js
$box.click (function(){
$(this).css("")
})

parent()方法获取父级元素,child()方法获取子级元素;siblings()方法获取兄弟节点,通过传字符串类型的选择器进行筛选

```js
$(this).parent().css("")`
$(this).child()
$(this).siblings("p")//兄弟节点并且是p标签的

3.3 链式调用

在jQuery中调用方法的返回值仍然是对象本身,所以可以连续打点调用其他

3.4其他节点关系方法

find()后代元素,包括子元素节点和孙子元素节点
参数:字符串歌格式的选择器,查找范围是所有恒不带
兄弟元素(紧邻的一个元素)
next()下一个兄弟元素
prev()上一个兄弟元素
兄弟元素(多选)
nextAll()后面的所有兄弟元素
prevAll()前面的所有兄弟元素
参数:字符串类型的选择器
parents()查找包含body在内的祖先级
参数:字符串类型的选择器标签进行筛选

3.5 on()方法

3.5.1 注册事件(避免一个元素上有多个事件发生覆盖现象)

封装的底层是addEventListener()
语法：jQuery对象.on(“事件名”,事件处理程序)

$("input").on("click",function(){
  alter(2);
})

3.5.2 事件委托

作用：将子级的事件委托给父类加载
语法：jQuery对象.on(‘事件名’,‘选择器’,事件处理程序)

<ul>
  <li>一号</li>
  <li>二号</li>
  <li>三号</li>
  <li>四号</li>
</ul>

//原生js事件委托
var ul = document.getElementByTagname("ul")[0]
ul.onclick = function(e) {
  e.target.style.background = "pink";
}
//使用jQuery实现事件委托
$("ul").on("click","li",function(){
  //在事件委托过程中，事件函数内部的this不指向事件源而是指向触发事件的委托子元素
  alert($(this).text())
})

3.6 off()方法移除事件

语法：jQuery对象.off()
$(input).off("click",fun1)
解绑事件委托：jQuery对象.off(“click”,“li”,fun1)
解绑的事件函数必须要有函数名

3.7 触发事件,自动触发事件

语法：jQuery对象.trigger(‘事件名’);

3.8 事件对象

原生js中事件处理程序的一个参数是e，但是存在兼容问题，在jQuery中无需考虑兼容问题。

3.8.1 鼠标事件对象相关属性

事件对象.clientX/Y 参照浏览器
事件对象.pageX/Y 参照文档
事件对象.offsetX/Y 参照元素

3.8.2 键盘事件相关属性

事件对象.keyCode 返回键码数字
事件对象.altkey/shiftkey/ctrlkey 返回布尔值按下为true

3.8.3 公共属性和方法

属性：事件对象.target 最初触发时间的Dom元素
事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
方法：事件对象.preventDefault()：阻止默认行为
事件对象.stopPropagation():阻止事件冒泡

$(document).keydown(function(e) {
  console.log(e.keyCode)
})

四、jQuer排序

4.1eq()大排序

参数是下标，从0开始，eq()方法将所有满足条件的标签进行集中排序。

$("p").eq(1).css("")//将下标为1的改变css样式

4.2 index()方法

获取指定元素在HTML结构中的兄弟中的下标位置。与大排序无关。与父级内部兄弟间关系有关

4.3each()遍历

使用场景：1.对jQuery对象元素的子级或者后代进行操作
2.对每个jQ对象中的元素操作。

$box = $(".box")
$box.each(function(){
	$(this).children().eq(1).css("");//对每个box中的第2个元素添加css效果
})

each()函数内部的this指向的是进来遍历的每一个元素。函数可以传入一个参数i，i表示遍历对象在整体的jQuery对象大排队中的下表位置

var $ps = $(".box p") 
$ps.each(function (i){//i记录的是遍历当前元素在jQuery对象排序中的位置
  $(this).click(function(){
    console.log(i);//所有box中p标签排序的下标
    console.log($(this).index());//当前box中p标签的下标
  })
})

4.4 入口函数

原生的window.onload等所有资源加载完毕以后执行函数内容。对应jq中的$(document).ready() 函数。【资源包括 DOM树、音频、视频、图片等】对应jQuery中的入口函数，只需要等待DOM树加载完毕即可执行。

$(document).ready(function(){
  console.log(2);
});
//简化写法
$(function(){
  console.log(3);
})

在一个页面上可以书写多个jQuery入口函数执行顺序按照前后加载执行。onload函数一个页面只能出现一次，后者覆盖前者

五、jQuery动画

5.1 show()和hide()和toggle()方法；slidUp()和slideDown()和 slideToggle()方法

效果：隐藏/消失/切换效果
参数：slow normal fast 或毫秒值，动画速度（swing和linear）,运动完执行的函数
两种显示隐藏的方法，必须设置display：block或none，前两种方法变化过程中透明度和高度都发生变化。后两种方法必须设置宽度，否则与前两种效果相同。滑动显示/隐藏如果设置了脱标方式的定位且设置了bottom，滑动方向会发生变化

//获取元素
var $pic = $("pic");
//添加点击事件
$btn1.click(function(){
  $pic.slideUp(1000)
})

5.2 fadeIn()和fadeOut()方法（淡入淡出）

参数：透明度数值
fadeTo()：淡入或淡出到某个指定透明度。
动画效果，执行的是透明度动画。也是在display 属性的block和none之间

5.3 animate()方法：执行css属性集的自定义动画

语法：$(selector).animate(styles,speed,easing,callback)
适用：所有属性值为数字的动画（opacity、width等）
参数1.css属性名和运动结束位置的属性值集合。
参数2.可选，运动时间，默认“normal”（相当于400ms）“slow、fast、数值毫秒”
参数3.可选，运动速度，“swing（先快后慢）、linear（匀速）”
参数4.可选，animate函数执行之后执行的函数

var $ps = $("p");
$ps.click(function(){
  $(this).animate({"left":500},2000,"swing",function(){
    //this指向运动的元素
    $(this).css("background","red")
  })
})

5.4动画排队

同一个元素设置了多个动画，动画会排队执行
原理：动画是由定时器实现的，定时器是异步加载，加载过程中不会影响后面代码运动执行
不同元素的动画不会互相影响，所以不会造成排队现象
非运动的代码不会等待运动的动画
自带动画的显示隐藏方法,设置给同一元素也会有动画排队

5.5动画延迟

将delay设置在某个方法之前，表示后面的运动要在规定时间后在执行，有延迟的效果
参数：时间的数值，表示延迟的时间

$box1.delay(2000).animate({"left": 500},during);

5.6stop()方法：停止对象身上排队的动画

作用:设置元素对象身上的排队的动画是以何种方式进行停止
参数1:是否清空后面的排队动画，true表示清空，false表示不清空只停止当前一个动画，默认值为false
参数2：当前动画是否到结束位置，true表示立即完成，动画立即走到结束位置，false表示不完成当前动画，停止在当前位置。默认值false

5.7清空动画排队

方法1：利用stop(true)在开始动画之前清除其他排队动画
方法2：利用is()方法，作用是显示元素对象的某种状态。传入参数是is(:“animated”),返回布尔值，true表示运动，false表示没有运动

六、节点操作

6.1 创建并追加元素

创建节点 $newli = $("<li>新的li标签</li>")

6.1.1追加到父元素之后

方法一、添加给父元素的最后，用append()方法
方法二、将子元素添加到父元素，用appendTo()方法
参数是父级选择器或者是父级元素对象

var $newli = $("<li>新的li标签</li>")
var $ul = $("ul")
$ul.append($newli)//添加给父元素的最后
$newli.appendTo($ul);

6.1.2 追加到父元素之前

方法一、向父元素最前面添加子元素用 prepend()
方法二、将子元素添加到父元素节点上 prependTo()

$ul.prepend($ul)
$newli.perpendTo("ul")
//或者$newli.perpendTo("$ul")

6.1.3追加到兄弟元素之后

方法一、after()方法
方法二、insertAfter()方法。参数是选择器或对象

var $oldli = $(".old")
$oldli.after($newli)
$newli.insertAfter($oldli)

6.1.4追加到兄弟元素之前

方法一、 before()方法
方法二、insertBefore()方法

$oldli.before($newli)
$newli.insertBefore($oldli)

6.1.5 注意

如果将页面已有标签元素添加到指定位置将会从原来位置剪切到新位置

6.2 删除、清空元素

jQuery对象.remove()删除方法$newli.remove()
jQuery对象.empty()清空内部所有元素和元素相关事件的方法
jQuery对象.html(’’)清空内部元素不清空元素事件

$(".box").empty();//推荐
$(".box").html('');//将内容替换为空

6.3 克隆元素

jQuery对象.clone()
参数：默认false仅仅克隆内容，true克隆内容和事件

var $box = $(".box")
var $newbox = $box.clone();//只克隆内容不克隆事件
$("body").append("$newbox");

6.4 操作元素尺寸

通过css("")方法获取到的属性值是字符串类型数据，通过以下方法得到的是数字类型数据。

6.4.1 width()和height()方法操作的只能是内容区域

jQuery对象.width()有参数为设置，无参为获取数值

6.4.2 innerWidth()和innerHeight方法

获取的是内容区域加padding区域的，设置大小时增加或减少的值设置给了内容区域

6.4.3 outerWidth()和outerHeigth()方法

获取的是border以内的区域大小，设置大小时增加或减少的值设置给了内容区域

6.4.4获取元素距离文档的距离

jQuery对象.offset()获取了元素的位置，永远参照文档，和定位无关。返回的是对象，对象中包含元素的位置

6.4.5 获取距离上级定位参考元素的位置

jQuery对象.position()。返回一个对象，包含元素位置
posotion()方法获取到的是元素位置，参照最近的定位元素。

6.4.6 获取滚动条卷走的距离

jQuery.scrollTop()
有参数是设置距离，无参是获取卷走距离

七、多库共存问题

引用多个库时在全局作用域中可能存在相同的标识符

7.1 关于$冲突的问题

解决方案1：jQuery中不使用$ 而使用jQuery关键字
解决方法2：jQuery.noConflict(),释放 $, 把$ 代表的函数返回给用户，用户可以用其他变量接收。
jQuery.noConflict();