jQuery简介

宗旨:Write less, do more.
内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器
版本:1.x 2.x 3.x # 可以使用3.x最新版
是第三方的类库:使用jQuery需要提前导入 # 实际中很容易遗忘了导入 jQuery下载
压缩之后的版本将很多变量名全部使用英文字母代替了
导入方式
本地导入
缺点在于需要提前下载文件
优点在于不会受到网络的影响
CDN导入
# CDN:内容分发网络
网站:bootcdn jquery最好使用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(){...})

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

  1. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  2. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  3. JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  4. 第一百六十八节,jQuery,表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

  5. jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  6. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  7. jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  8. Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器。

    基本选择器 说明:通过元素id.class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test& ...

  9. jquery表单选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器

    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...

随机推荐

  1. 三分钟:极速体验JAVA版目标检测(YOLO4)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  2. 拉普拉斯平滑(Laplacian smoothing)

    概念 零概率问题:在计算事件的概率时,如果某个事件在观察样本库(训练集)中没有出现过,会导致该事件的概率结果是  $0$ .这是不合理的,不能因为一个事件没有观察到,就被认为该事件一定不可能发生(即该 ...

  3. tmux安装配置与使用

    tmux安装 sudo apt-get install tmux tmux配置 在家目录下操作 cd git clone https://github.com/gpakosz/.tmux.git ln ...

  4. C#winform控件序列化,反序列化

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  5. 【小记录】android下opencv的cv::dft()函数,CPU版本与opencl版本的性能相差16倍

            cv::dft  相差15.9倍         cpu版本  单次调用  0.029448 毫秒         opencl版本  单次调用  0.468688  毫秒   差别仅 ...

  6. 【小记录】cv::cuda::Stream中取出cudaStream_t并用于核函数的计算

    以下是找到的代码 1 cv::cuda::Stream stream; 2 cudaStream_t s = cv::cuda::StreamAccessor::getStream(stream); ...

  7. mate10碎屏机当成小电脑使用尝试

    1.屏碎了修起来300-400,自己动手至少也要260以上买个屏幕钱. 手机图案锁屏也不知道密码,给我手机的亲戚忘了.当年手机被车压弯了. 对着恢复教程,盲屏幕猜着按还原了. 2.之后一路从8代系统更 ...

  8. Sentry 开发者贡献指南 - 浏览器 SDK 集成测试

    Sentry 的浏览器 SDK 的集成测试在内部使用 Playwright.这些测试在 Chromium.Firefox 和 Webkit 的最新稳定版本上运行. https://playwright ...

  9. JavaWeb后端工程师技能图

  10. Typora下载安装教程(全面)

    Typora下载与安装 一:下载 1.1百度搜索 https://www.typora.io/ 点击链接进入后映入眼帘的就是一款简洁的Typora网页,然后下滑进入主页. 1.2点击Download( ...