Juqery就是这么简单(中)

简介: 笔记


追加


  • append():追加到父元素之后
  • prepend():追加到父元素之前
  • after():追加到兄弟元素之后
  • before():追加到兄弟元素之前


查询层次关系


我们发现在选择器上就有层次关系的选择器,在API上也有层次关系的方法。一般地,我们用方法来定位到对应的控件比较多

  • children():只查询子节点,不含后代节点
  • next():下一下兄弟节点
  • prev():上一下兄弟节点
  • siblings():上下兄弟节点


css样式


  • addClass():增加已存在的样式
  • removeClass():删除已存在的样式
  • hasClass():判断标签是否有指定的样式,true表示有样式,false表示无样式
  • toggleClass():如果标签有样式就删除,否则增加样式


动画效果

往这些方法下设置参数,那么就可以控制它的隐藏、显示时间

  • show():显示对象
  • hide():隐藏对象
  • fadeIn():淡入显示对象
  • fadeOut():淡出隐藏对象
  • slideUp():向上滑动
  • slideDown():向下滑动
  • slideToggle():上下切换滑动,速度快点


CSS尺寸属性

直接调用无参就是获取,给指定的参数就是修改

  • offset():获取对象的left和top坐标
  • offset({top:100,left:200}):将对象直接定位到指定的left和top坐标
  • width():获取对象的宽
  • width(300):设置对象的宽
  • height():获取对象的高
  • height(500):设置对象的高



标签内容和属性

  • val():获取value属性的值
  • val(""):设置value属性值为""空串,相当于清空
  • text():获取HTML或XML标签之间的值
  • text(""):设置HTML或XML标签之间的值为""空串
  • html():得到标签下HTML的值
  • **attr(name,value):给符合条件的标签添加key-value属性对 **
  • removeAttr():删除已存在的属性



增删改标签

  • **$("<div id='xxID'>HTML代码</div>"):创建元素,属性,文本  **
  • remove():删除自已及其后代节点
  • clone():只复制样式,不复制行为
  • clone(true):既复制样式,又复制行为
  • replaceWith():替代原来的节点



迭代

由于Jquery对象都是被看成是一个数组,each()方法就是专门用来操作数组的

  • each():是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象



Jquery事件API

JavaScript一大特性就是事件驱动,当用户用了执行了某些动作以后,JavaScript就会响应事件,在事件的方法上,我们就可以对用户的动作“回馈”一些信息给用户!

Jquery也对JavaScript事件进行了封装,我们看一下以下的API:

  • window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者
  • ready:在浏览器加载web页面时触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化
  • ready和onload同时存在时,二者都会触发执行,ready快于onload
  • change:当内容改变时触发
  • focus:焦点获取
  • select:选中所有的文本值
  • keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同
  • mousemove:在指定区域中不断移动触发
  • mouseover:鼠标移入时触发
  • mouseout:鼠标移出时触发
  • submit:在提交表单时触发,true表示提交到后台,false表示不提交到后台
  • click:单击触发
  • dblclick:双击触发
  • blur:焦点失去

值得注意的是:当用户执行动作的时候,浏览器会自动创建事件对象,传递进去给响应事件的方法【类似与监听器的原理】,那么我们在响应方法上就可以获取一些属性:

23.jpg

这里写图片描述



Jquery对ajax常用的API


我们在开始使用JavaScript学习AJAX的时候,创建异步对象时,需要根据不同的浏览器来创建不同的对象….装载XML文件的时候,也有兼容性的问题。

Jquery就很好地屏蔽了浏览器不同的问题,不需要考虑浏览器兼容的问题,这是非常非常方便我们开发的。

  • **$.ajax([options]) **
  • load(url, [data], [callback])
  • **$.get(url, [data], [fn], [type]) **
  • $post(url, [data], [callback], [type])
  • serialize()

前4个方法的功能都是差不多的,都是向服务器发送请求,得到服务器返回的数据

最后一个是对表单的数据进行封装,将表单的数据封装成JSON格式




目录
相关文章
|
3月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
40 1
|
27天前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
29 1
|
3月前
|
JavaScript
js之隔行换色
js之隔行换色
27 0
|
6月前
|
JavaScript 前端开发
js实现隔行换色
js实现隔行换色
33 2
|
JavaScript 前端开发 索引
JS实现隔行换色
JS实现隔行换色
|
6月前
|
JavaScript 前端开发
JS 隔行换色
JS 隔行换色
|
JavaScript 前端开发 Java
javascript原生实现二级联动下拉菜单
JS原生实现二级联动菜单(市/区县) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
384 0
javascript原生实现二级联动下拉菜单
|
JavaScript 前端开发
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
190 0
|
XML JSON JavaScript