ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery笔记

2021-11-18 13:03:25  阅读:136  来源: 互联网

标签:jQuery 动画 元素 笔记 节点 选择器 change 属性



1,基本事项
  1,引用jquery包
  2,$(document).redy()一般理解成是页面加载完执行的动作(实际上不是,是把文档解析成DOM树后才触发的),实际上是在基于document这个DOM元素构建而成的jquery对象上,调用ready()方法,所以实际上可以不写document的,写成$().redy()但是其实jquery默认就是ready()方法,意思是自动执行,所以我们可以不写ready()方法,直接简写成$(function(){})
2,选择器
  1,基本选择器#id .类
  2,层次选择器 空格
  3,基本过滤选择器 eq() 获取第n个元素
  4,内容过滤器:contains
  5,属性选择器[name='']
  6,子元素过滤器 :nth-child(2)
  7,表单选择器:select
  8,表单对象属性过滤器:selected
3,DOM操作
  1,创建元素 $("<li title='111'>阴阳师</li>")
  2,插入节点 $("h3").append("<b>我不喜欢玩游戏</b>")
  3,删除节点 $("ol li").eq(1).remove()
  4,复制节点 $(this).clone(true).appendTo("ol")
  5,替换节点 $("h3").replaceWith("<b>我最讨厌哪个游戏</b>")
  6,包裹节点 $("li").warpAll("<b></b>")
4,事件
  1,click 点击事件
  2,change 当值元素发生改变时触发的事件
  3,trigger("change")自动触发事件
  4,mouseover mouseout mouseove 鼠标移入移出事件
  5,hover鼠标悬停事件
  6,focus blur焦点事件
  7,keyup e.which e.pageY e.pageX键盘事件
5,动画效果
  1,基本动画(hide show fadeout fadeln slideup sidedown)
  2,自定义动画
  $(this).animate({left:"400px",height:"200px"},3000).animate({left:"400px",height:"200px"},3000)
6,常用方法及属性
  1,each循环遍历
  2,attr prop 一个值返回属性值 两个值给属性值赋值 removeattr removeprop从备选元素中移除属性
  3,toggleclass该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之addclass 添加类 removeclass移除类
  4,siblings同级的其他元素
  5,find子元素中的元素
  6,eq获取第n个元素
  7,.trigger("change")===.change()
  8,val() text() html()
  9,window.onload 和$(function(){})
  10$(selector).is(":visible")
  11stop()
7,现象
  1,冒泡行为
  2,默认行为
  3,css未排队和排队
  4,自定义单个动画和多重动画连续滑动问题 stop
8,属性
  1,this.defaultvalue
  2,thismyTile=this.title

//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
//replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
//lastIndexOf:获取元素当前索引
localStorage.setItem("skicolor", name); //占取电脑内存 skicolor命名 name存的值 存值
localStorage.getItem("skicolor");取值

标签:jQuery,动画,元素,笔记,节点,选择器,change,属性
来源: https://www.cnblogs.com/jl1234/p/15571853.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有