JQuery获取元素

jQuery

jQuery 是一个高效、精简并且功能丰 富的 JavaScript 工具库 由John Resig 在 2006 年 1 月,jQuery 正式发布 query 本身是选择的意思,主要对 JavaScript 中的选择元素的方法进行了大量的优化。

版本发展

1.X:兼容 IE6/7/8,是工作中最常使用的,学习 1.12 版本。 2.X:不兼容 IE6/7/8,多用于 jQuery 官方调整 bug 使用。工作中不使用。 3.X:不兼容 IE6/7/8,只能在高版本浏览器中使用,是现在 jQuery 官方主要的维护升级的 版本。 http://jquery.com/download/ 或 https://www.bootcdn.cn/jquery/ 使用 jQuery 过程,可以参考 API 应用手册

jQuery 常见操作

1.$() 方法

在 DOM 操作中,基本都是从获取元素开始的,jQuery 中封装了一个更加强大的获取元素方法 $()

在 jQuery 中,只有一个全局变量 $,这是 jQuery 的一大特点,避免了全局变量的污染。 最开始变量不叫做 $,叫做 jQuery() 方法,在库中两个名字是并存的,都可以使用。 经典报错:$ 未定义,此时可能是没有引入jq文件或者是文件路径有问题
例:通过类选择器获取元素
$('.box')

2.jQuery 对象

$() 方法获取到的内容叫做 jQuery 对象 内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是 jQuery 对象的方法。 通过 $() 获取的元素是一组元素,进行操作时是批量操作
// 获取所有标签为p的元素,改变背景颜色,属名和属性值都是字符串类型
$('p').css('backgroundColor', 'yellow');
// 更改标签内容
$('p').html('lalala');
// 设置动画,{ }内写变化后的属性,2000为间,单位是毫秒
$('p').animate({
 'width': 1000
}, 2000);

jQuery 对象和原生 js 对象

区别
    jQuery 对象得到后,只能使用 jQuery 对象的方法,不能使用原生 js 元素对象的方法。 原生 JS 对象也不能使用 jQuery 的方法。 jQuery 对象实际是一个类数组对象,内部包含所有的获取的原生 js 对象,以及大量的 jQuery 的方法和属性。
获取 jQuery 对象中原生 js 对象的个数的方法
    $().length
    $('p').length $().size()
    $('p').size()
互相转换

    jQuery 转原生:直接利用数组下标方式,得到 jQuery 封装的原生对象。

    // 声明一个变量表示用jq获取的p 对象类数组
    let $ps = $('p')
    // 通过数组下标方式可以获取到js原生对 象,就可以使用js 原生对象的方法了
    $ps[0].style.color = 'red'
    

    原生转 jQuery:将原生对象用 $() 方法包裹即可

    let op = document.getElementsByTagName('div')[0]
    $(op).css('backgroundColor', 'skyblue')
    

jQuery 选择器 和 选择方法

    使用 CSS2.1 和 CSS3 中的选择器,都可以传入$()

    参数:必须是字符串格式的选择器。
    $('p').html('woshishuoyoude') 所有的 p
    $('div p').html('我是box里的p') div 里的 p
    $('input:disabled').css('color', 'black') 选中的是被禁用的(设置了disabled属性)input
    $('input:enabled').css('color', 'black') 选中的是没被禁用的(没设置disabled属性)input
    $(':input').css('color', 'yellow') 选中所有表单元素

    jQuery 中新增的自己的选择器
    筛选选择器,也叫过滤选择器

    用法:在基础选择器后面增加一些筛选的单词,筛选出前面选择器的选中内容中一部分。或者可以作 为高级选择器的一部分。 常用:
    $(":first") 第一个
    $(":last") 最后一个
    $(":eq(index)") 下标为 index 的项
    $(":gt(index)") 大于下标为 index 的项
    $(":lt(index)") 小于下标为 index 的项
    $(":odd") 下标为奇数的项
    $(":even") 下标为偶数的项
    $(":not(selector)") 去除所有与给定选择器匹配的元素
    $('p:not(:first)').css('background-color', 'yellow') 选中去掉第一个 p 后剩下的所有p

    筛选的方法

    也叫过滤方法,jQuery 中除了用选择器选择元素,jQuery 对象内还封装了一些对应的筛选方法。 常用:
    $(“p”).first() :选中被选中p中的第一个
    $(“p”).last() :选中被选中p中的最后一个
    $(“p”).eq(3) :选中下标为3的p
来源url
栏目