7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件 7、前端--jQuery简介、基本选择

jQuery简介

宗旨:Write less, do more. 内部封装了js代码是编程更加简单并且兼容所有的主流浏览器版本:1.x 2.x 3.x# 可以使用3.x最新版是第三方的类库:使用jQuery需要提前导入# 实际中很容易遗忘了导入jQuery下载压缩之后的版本将很多变量名全部使用英文字母代替了导入方式本地导入缺点在于需要提前下载文件优点在于不会受到网络的影响 CDN导入 # CDN:内容分发网络网站:bootcdnjquery最好使用3.4.1版本基本使用很多时候jQuery都是一行代码搞定所有 """ 使用jQuery需要有关键字声明 jQuery 或者 $ (推荐) """

基本选择器

/* 如何通过变量名来区分指代的是js对象还是jQuery对象 eg: 原生的js对象 var pEle = ... jQuery的对象 var $pEle = ... */ $('#d1')// js：document.getElementById('d1') $('.c1')// js：document.getElementsByClassName('d1') $('p')// js：document.getElementsByTagName('p') $('div.c1')// 查找class含有c1的div标签 $("#d1, .c1, p")// 并列查找 $("x y") // x的所有后代y（子子孙孙） $("x > y") // x的所有儿子y（儿子） $("x + y") // 找到所有紧挨在x后面的y $("x ~ y") // x之后所有的兄弟y

基本筛选器

:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

$('[name]') $('[name="jason"]') $('input[name="jason"]')

表单筛选器

$(':text') // 查找属性值是text的form表单内的标签 $(':checked')// 会连同option默认的selected一起找到

筛选器方法

/* 使用原生js代码批量查找到标签之后结果是一个数组需要索引取值之后才可以调用标签的一些方法使用jQuery代码批量查找到标签之后结果是一个jQuery对象(像数组) 不需要索引取值就可以直接调用封装的方法两者对象的转换 js对象转jQuery对象 $(js对象) jQuery对象转jd对象 jQuery对象索引取值 */ .next() .nextAll() .nextUntil() .prev() .prevAll() .prevUntil() .parent() .parents() .parentsUntil() .children() .siblings() .find()

节点操作

# 样式类操作 addClass()# classList.add() removeClass()# classList.remove() hasClass()# classList.contains() toggleClass()# classList.toggle()# 样式操作 css('属性名','属性值')$(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { $("#b2").addClass("hide"); } }); # 文本操作 text()# innerText html()# innerHTML val()# value jQuery对象先转js对象之后.files ''' 括号内不写参数：获取值写参数：设置值 ''' # 属性操作 attr()# setAttribute() '''适用于属性为静态的情况(不经常修改动态变化的)''' prop() $($(':checkbox')[1]).prop('checked',true) """适用于动态变化的情况尤其是选择类标签"""# 文档处理 append()# 内部的尾部追加元素 prepend()# 内部的头部追加元素 after()# 同级别下面添加元素 before()# 同级别上面添加元素 remove()# 移除当前元素 empty()# 清空当前元素内部所有的数据 clone()# 克隆标签括号内可以加true来克隆事件

事件

绑定事件的两种方式方式1 jQuery对象.事件名(function(){}) $('#d1').click(function(){alert(123)}) 方式2 jQuery对象.on('事件名',function(){}) $('#d1').on('click',function(){alert(123)}) """ 有时候绑定事件可能没有效果这个时候可以考虑切换绑定方式方式1不行就方式2 方式2不行就方式1 """click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})