JQuery

JQuery是一个高效的JS库，用于操作dom对象。 设计宗旨: write less do more, 是JavaScript Query的缩写。

DOM操作， 事件处理等等。

优点： 轻量级，跨浏览器兼容，链式编程。

最新版本3.x (3.7.0)

是js功能封装，功能非常强大。例如js中一次修改div的多个值

JQery 是 javascript 功能封装，功能非常强大。官方网站：https://jquery.com/

例如js中一次修改div的多个值

$('div').css('backgroud-color', 'blue').width(150).height(100).html("hello");

hello

<script src=”juery.min.js”></script>

$(‘div’).hide();

1，等在正文加载完成后在执行：

$(document).ready(function(){

$(‘div’).hide()

}

2，jQurey入口函数

$(function(){

//页面加载完成后执行。

}

3， $是JQuery的别称。可以认为是JQuery的顶级对象。
jQuery(function(){

//页面加载完成后执行。

}

4， $(‘div’) 获取到的是jQuery对象，与DOM对象不同。只能用Jquery方法。

5， DOM与JQuery互转

  • 使用$符号将DOM对象转换为JQuery对象。$(myDom)

  • JQuery对象转换为DOM对象$(‘div’)[0] 或 $(‘div’).get(0)

console.log() 输出到控制台。

选择器

选择DOM元素，然后进行操作。和css有点类似。

$(‘选择器’)

  • ID选择器 获取指定ID的元素， 例如 $(“#id”)

  • 类选择器 获取指定class的元素，例如 ：$(“.classname”)

  • 标签选择器 获取同一类标签的所有元素 $(‘div’)

  • 并集选择器 获取多个元素， 例如$(‘div, li’)

  • 交集选择器 $(‘li.p’)

  • 子代选择器 下一代，使用大于号， 例如 $(‘ul>li’)

  • 后代选择器 子代及更下一代，使用空格，例如： $(‘ul li’)

$(document) 表示所有元素。

  • ID选择器， 例如选取 id=”d123” 的元素：$(“#d123”), 相同的 id 值只能在文档中出现一次。id以字母开头

方法 :

  • siblings 兄弟元素，除了自身

  • nextAll 自身后面的兄弟元素。

  • prevAll 自身前面的兄弟元素。

  • eq(index) 某一个。index指定索引。

  • hasClass 检查当前元素是否是某个特定的类，如果有，返回true

class选择器

class 选择器选取带有指定 class 的所有元素。 class 引用 HTML 元素的 class 属性。

例如有多个输入框，为相同的class，可以同时选择，然后循环获取数据。

例如

var name = $('.class_name').val();

获取class名称为inputa的标签，并将其数据放到numArr数组当中

var numArr = [];
var objs = $('.inputa');
console.log(objs)
for (let i = 0; i < objs.length; i++) {
        console.log(objs.eq(i).val()); // 将文本框的值添加到数组中
        numArr.push(objs.eq(i).val());
}
console.log(numArr)

筛选选择器

使用冒号”:”

  • first 第一个 $(ul:first)

  • last 最后一个 $(ul:last)

  • eq(index) 等于 $(ul:eq(2)) 第二个。 索引号从0开始。

  • odd 奇数

  • even 偶数

hasclass(“aaa”) 是否有aaa 类名。

父子节点

  • 父节点 parent()

  • 子节点 children()

  • 所有后代选择器 find()

隐式迭代

把匹配的所有元素内部进行循环，调用其方法。

修改背景颜色，可以多个对象一起设置。可以认为是隐式迭代。

$('div').css("background", "blue")
$('p').css("color", "red")||||||| .r1796

css方法(样式操作)

  • css(“color”) 返回属性值。

  • css(“color”, “red”) 设置

  • css({width:400, height:300, color: “red”}) 以对象方式来设置

  • addClass(“current”) 增加类名, current为类名，和相同名字的css绑定。

  • removeClass(“current”) 删除类名。

  • toggleClass(“current”) 切换类名。

示例

  • 当前元素高亮，其他元素清除高亮

// 隐式迭代，所有的按钮均注册click事件函数。
$("button").click(function(){
        $(this).css("background", "red");
        $(this).siblings("button").css("background", "");
})

显示及动画

  • show 显示

  • hide 隐藏 可以动画效果。

    hide(1000)

  • toggle 切换

滑动

  • slideDown() 下拉滑动

  • slideUp() 上拉滑动

  • slideToggle 切换滑动

  • hover([over],out) 鼠标经过和离开的事件切换

$("div").hover(function(){},
      function(){})

  • stop() 停止动画， 动画默认有排队，使用stop()来停止动画。

淡入淡出

  • fadeIn() 淡入

  • fadeOut() 淡入出

  • fadeTonggle() 淡入淡出切换

  • fadeTo 渐进调整透明度 fadeTo(1000, 0.8) $(“div”).fadeTo(1000,0.8)

  • animate 自定义效果 $(“div”).animate({left:200,top:100})

参考资料