一、操作标签

方法\语言 js jQuery
给标签添加类 标签对象.classList.add() jQuery对象.addClass()
移除类 .classList.remove() .removeClass()
判断是否有类 .classList.contains() .hasClass()
有则删除,无则添加 .classList.toggle() .toggleClass()

jQuery的几个特点

  • 链式操作,一行代码可以操作很多标签
  • jQuery对象调用jQuery方法后还是jQuery对象,可以继续使用

举例:一行代码将第一个p标签变成红色第二个p标签变成绿色

$('p').first().css('color','red').next().css('color','green')
# 这种操作在python中的实现
class MyClass(object):
def func1(self):
print('func1')
return self def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2() # 在调用这个对象内的方法后,返回的还是这个对象,可以一直调用使用很多方法

1 位置操作

offset()  # 相对于浏览器窗口
position() # 相对于父标签 scrollTop() # 页面所处的位置距顶部
$(window).scrollTop()
0
$(window).scrollTop()
969
$(window).scrollTop() # 括号内不加参数就是获取
1733
$(window).scrollTop(0) # 加了参数就是设置
n.fn.init [Window]
$(window).scrollTop(500)
n.fn.init [Window]
scrollLeft()

2 尺寸

# 尺寸
$('p').height() # 文本
20
$('p').width()
1670
$('p').innerHeight() # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight() # 文本+padding+border
26
$('p').outerWidth()
1674

3 文本操作

方法\语言 js jQuery
获取或设置内部文本 .innerText() .text()
获取或设置内部全部内容 .innerHTML() .html()

4 获取值操作

方法\语言 js jQuery
获取值操作 .value = 'xxx' .val('xxx')
# 标签对象和jQuery对象方法对比
$('div').first().val('123') === $('div')[0].value = '123'

5 属性操作

方法\语言 js jQuery
设置标签属性 .setAttribute() .attr(name,value)
取得标签属性 .getAttribute() .attr(name)
移除标签属性 removeAttribute() removeAttr(name)
let $divEle = $('div').first()

$divEle
S.fn.init [div, prevObject: S.fn.init(2)] # 取得divEle的username属性
$divEle.attr('username')
"hz" # 设置divEle的password属性为123
$divEle.attr('password','123')
S.fn.init [div, prevObject: S.fn.init(2)] $divEle.attr('password')
"123" # 移除divEle的password属性
$divEle.removeAttr('password')
S.fn.init [div, prevObject: S.fn.init(2)] $divEle.attr('password')
undefined

6 获取属性的特例

# 对于上述需要获取具体属性和属性值的时候用attr
# 如果要返回布尔值,如checkbox radio option是否被选中用prop
$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked') # 无效
w.fn.init [input#d3] $('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]

7 文档处理

方法\语言 js jQuery
创建一个p标签 .createElement('p') $('< p >')
添加到特定位置 .appendChild() .append()

实际操作

let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
$pEle.appendTo($('#d1')) $('#d1').prepend($pEle) # 内部头部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)] $('#d2').after($pEle) # 放在某个标签后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1')) $('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2')) $('#d1').remove() # 将标签从DOM树中删除
w.fn.init [div#d1] $('#d1').empty() # 清空标签内部所有的内容
w.fn.init [div#d1]

二、事件

引子

// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
}); // 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})

1 克隆事件

<button id="d1"> 点击</button>

<script>
$('#d1').on('click',function () {
$(this).clone(true).insertAfter($('body')) // clone(true) 默认false表示只克隆html标签和css样式,不克隆事件,改成true就可以克隆事件
})
</script>

2 自定义模态框

模态框内部本质就是给标签移除或者添加上hide属性

3 左侧菜单

<script>
$('.title').click(function () {
// 先给所有的items加hide
$('.items').addClass('hide')
// 然后将被点击标签内部的hide移除
$(this).children().removeClass('hide')
})
</script>

4 回到顶部

<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
</script>

5 输入校验

<script>
let textEle = $(':text')
let passEle = $(':password')
$('#d1').click(function () {
if(!textEle.val())
textEle.next().text('请输入!')
if(!passEle.val())
passEle.next().text('请输入!')
})
$('input').focus(function () {
$(this).next().text('')
})
</script>

6 input实时监控

<input type="text" id="d1">

<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>

7 hover事件

<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// }) $('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>

8 键盘按键按下事件

<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>

day57 jQuery基础的更多相关文章

  1. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  2. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  3. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  4. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  5. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 8、网页制作Dreamweaver(jQuery基础:安装、语法)

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  8. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  9. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

随机推荐

  1. 利用Python将多个PDF文件合并

    from PyPDF2 import PdfFileMerger import os files = os.listdir()#列出目录中的所有文件 merger = PdfFileMerger() ...

  2. 【JAVA进阶架构师指南】之五:JVM性能调优

    前言   首先给大家说声对不起,最近属实太忙了,白天上班,晚上加班,回家还要收拾家里,基本每天做完所有事儿都是凌晨一两点了,没有精力再搞其他的了.   好了,进入正题,让我们来聊聊JVM篇最后一个章节 ...

  3. ecshop php商城系统数据库结构及表的介绍分析

      ecshop共86张表,确实比较多,不过功能确实最完善的. 表结构分析 ecs_account_log // 用户账目日志表 ecs_activity // 活动表(代码,名称,开始,结束,描述) ...

  4. (一)Log4j使用

    原文链接:https://www.jianshu.com/p/eb4ac2571c94?tdsourcetag=s_pctim_aiomsg 1.先创建个maven项目,在我们项目的pom文件中导入l ...

  5. upd套接字服务器与客户端交互C++代码示范

    upd套接字服务器与客户端交互C++代码示范 // vc2_2_4UDPserver_Txwtech.cpp : 定义控制台应用程序的入口点. //服务器端 #include "StdAfx ...

  6. 关于 JOIN 耐心总结,学不会你打我系列

    现在随着各种数据库框架的盛行,在提高效率的同时也让我们忽略了很多底层的连接过程,这篇文章是对 SQL 连接过程梳理,并涉及到了现在常用的 SQL 标准. 其实标准就是在不同的时间,制定的一些写法或规范 ...

  7. 上位机面试必备——TCP通信灵魂二十问【上】

    关注公众号获取更多干货 TCP通信协议应该是上位机开发中应用最广泛的协议,无论是西门子S7协议.三菱MC协议或者是欧姆龙的Fins-TCP协议等,都是TCP通信协议的典型应用.很多人在上位机面试时,都 ...

  8. 3、尚硅谷_SSM高级整合_使用ajax操作实现删除的功能

    点击删除的时候,要删除联系人,这里同点击编辑按钮一样给删除按钮添加点击事件的时候不能使用 $(".delete_btn").click(function(){ }); 这种方式,因 ...

  9. redis基础二----操作hash

    上面usr就是hash的名字,usr这个hash中存储了key 为id.name和age的值 一个hash相当于一个数据对象,里面可以存储key为id name age的值 2.批量插入一个hash数 ...

  10. Nacos学习笔记

    Nacos简介 Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理.Nacos 帮助更敏捷和容易地构建.交付和管理微服务平台. Nacos 是构建以“服 ...