内容回顾

BOM

  • location.reload() 全局刷新页面
  • location.href
  • location.hash
  • location.pathname
  • location.hostname
  • location.origin 源(同源策源(查阅资料))始地址

client,offset,scroll

  • document.documentElement.clientWidth 屏幕可视宽度
  • offsetTop 到页面顶部的距离
  • scrollTop 页面卷起的高度

jQuery核心的思想

write less, do more 写的少 做的多

jQuery的入口函数

//它们 是没有事件覆盖现象

$(document).ready(fn);

$(fn);

//窗口加载

$(window).ready(fn)

为什么要学习jQuery

js的先天性不足

  • window.onload()的事件覆盖现象
  • 代码容错量大
  • 兼容性不好
  • 动画效果难以实现
  • 代码比较乱

jQuery的98%的都是方法

jQuery的选择器(选中DOM)*

$('')

基本选择器

  • id选择器
  • 类选择器
  • 标签选择器
  • 子代
  • 后代
  • 组合
  • 交集
  • 通配符
  • 兄弟 + ~

基本过滤选择器 + 属性选择器

  • $('li:eq(index)')
  • :gt(index)
  • :lt(index)
  • :odd
  • :even
  • :first
  • :last
  • input[type='text']

筛选的方法***

  • $('li').eq(index)
  • find(selector) 后代
  • children() 亲儿子
  • parent() 亲爹
  • siblings() 选取兄弟(除了它自己 )

jQuery和js对象相互转换**

//js==>jquery

$(js对象)

jquery对象 => js对象

$('li')[index];

$('li').get(index);

jQuery的动画

显示隐藏动画

show();

hide(3000,fn);

toggle(3000,fn)

卷帘门效果

slideDown(); //显示

slideUp();//隐藏

slideToggle() //开关式的显示隐藏

淡入淡出效果

fadeIn();//显示

fadeOut();//隐藏

fadeToggle()//开关式的显示隐藏

额外内容

click

css(); //样式属性操作  oDiv.style.xxx

text(); //innerText

html(); //innerHtml

val();        //value

addClass();

removeClass()

今日内容

jQuery的自定义动画

$(selector).animate({css的属性},speed,fn)

要想修改背景颜色,那么要借助与jquery的插件 https://github.com/jquery/jquery-color/blob/master/jquery.color.js

使用动画的时候一定要先stop() 再开启动画,使用定时器的时候 要先清定时器,再开定时器

jQuery的DOM操作

标签属性操作

attr()  //getAttrbute() setAttrbute() 路径的相对地址

removeAttr() //removeAttibute()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<img src="./xiaohua.jpg" alt="" >

<script src="./libs/jquery-3.3.1.js"></script>

<script>

    $(function () {

        //attr

        //获取值

        console.log($('img').attr('src')); //./xiaohua.jpg

        //设置值

        $('img').attr('alt','美女'); //./xiaohua.jpg

         //设置多个标签属性值

         $('img').attr({

             'aaa':'美女',

             'bbbb':'个哈哈哈'

         });

         //移除 removeAttr()

        setTimeout(()=>{

            //移除单个属性

           // $('img').removeAttr('alt');

           //移除多个属性

            $('img').removeAttr('alt aaa bbbb');

        },3000)

    })

</script>

</body>

</html>

注意: 不要使用attr()或者prop()来设置类名

对象属性操作

prop()  //oDiv.id

removeProp()  //oDiv.id = ''

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active{

            border: 1px solid red;

        }

    </style>

</head>

<body>

<img src="./xiaohua.jpg" alt=""  class="box">

<script src="./libs/jquery-3.3.1.js"></script>

<script>

    $(function () {

        //获取值

        console.log($('img').prop('src'));

        $('img').prop('aaaa','美女');

        $('img').prop({

            'bbb':'哈哈',

            'aa':'嘿嘿'

        });

        //移除 removeProp() 删除一个属性

        $('img').removeProp('aa');

        $('img').removeProp('bbb');

        console.log($('img'));

        setTimeout(()=>{

        },3000)

    })

</script>

</body>

</html>

类的操作

addClass() //添加类

removeClass() //移除

toggleClass() //添加|移除

值的操作

//如果不传参数 表示获取值

//如果传参数,表示设置值

text();// innerText 设置文本的内容

html(); //innerHTML 即设置文本又设置标签

val(); //value

样式属性操作

//如果有一个参数,参数是字符串表示获取值,参数是对象,表示设置多个值

//如果有两个参数,表示设置值

$(selector).css();

操作input中value的值

下拉列表

<select name="timespan" id="timespan" class="Wdate"  multiple="multiple" >

    <option value ='1' selected>alex</option>

    <option value = '2' selected="">wusir</option>

    <option value = '3'>wulaoban</option>

</select>

总结:

1.如果option中的属性有value,优先使用value设置

$('#timespan').val(['1','3']);//选中1 和3选项

2.如果没有value,那么使用标签的文本内容设置

$('#timespan').val(['alex','wulaobnan']) //选中1 和 3 选项

Day048--jQuery自定义动画和DOM操作的更多相关文章

  1. Jquery 自定义动画同步进行如何实现？

    需求描述:我需要对不懂的两个HTML对象进行操作,同时开始动画,同时结束动画. 遇到问题:如果先后对连个对象进行 animate动画,那么第一个会先运行,等第一个运行完了运行第二个,这样就不同步了. ...

  2. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  3. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  4. jQuery基础知识点（DOM操作）

    1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...

  5. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  6. jQuery 自定义动画效果

    <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...

  7. jquery学习：选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  8. jQuery（3）——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

  9. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

随机推荐

  1. （转）聊聊Greenplum的那些事

    开卷有益——作者的话 有时候真的感叹人生岁月匆匆,特别是当一个IT人沉浸于某个技术领域十来年后,蓦然回首,总有说不出的万千感慨. 笔者有幸从04年就开始从事大规模数据计算的相关工作,08年作为Gree ...

  2. Session, Token, OAuth 鉴权那些事儿

    鉴权那些事 整体思路 无论什么样的服务, Web 服务总是不能绕开鉴权这个话题的, 通过有效的鉴权手段来保护网站数据, 来为特定用户提供服务. 整体来说, 有三种方式: Session-Cookie ...

  3. SQLServer删除数据列

    删除数据列 开发或者生产过程中多建.错误或者重复的数据列需要进行删除操作. 使用SSMS数据库管理工具删除数据列 方式一 1.打开数据库->选择数据表->展开数据表->展开数据列-& ...

  4. LeetCode算法题-Reshape the Matrix（Java实现）

    这是悦乐书的第264次更新,第277篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第131题(顺位题号是566).在MATLAB中,有一个非常有用的函数叫做'reshap ...

  5. LeetCode算法题-Keyboard Row（Java实现）

    这是悦乐书的第245次更新,第258篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第112题(顺位题号是500).给定一个单词列表,返回可以在美国键盘的一行上使用字母表键 ...

  6. python selenium2 中的显示等待WebDriverWait与条件判断expected_conditions举例

    #coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium. ...

  7. Elixir 简介

    概述 Elixir 是一种基于 Erlang 虚拟机的函数式,面向并行的通用语言, 它是一门通用语言,所以不仅可以用在擅长的高可用,高并发场景下,也可以用在 web 开发等场景下. Erlang 诞生 ...

  8. easyui中datagrid+layout布局

    1.掌握layout布局 首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

  9. golang web实战之一（beego,mvc postgresql）

    想写个小网站,听说MVC过时了,流行MVVM,但是看了一下gin+vue+axios方式,发现还有一堆知识点要掌握,尤其是不喜欢nodejs和javascript方式的写法.算了,还是用beego来写 ...

  10. 模拟vue的tag属性，在react里实现自定义Link

    我封装了一个简单的实现react里自定义Link的方法,方便大家使用. 因为普通组件没有metch.location.history等属性.只有在<Router>里面的<compon ...