1.jQuery给标签添加子元素(父子关系)

jQuery对象.append("子");

将div标签插入到ul标签之后

$("ul").append($('div'));

div标签插入到ul之前

$("ul").preappemd($('div'))

将div标签插入到ul标签之后(兄弟关系)

格式:兄.after($("div"))
$('ul').after($("div"))

将div标签插入到ul之前

$("ul").before($("div"))

2.取出form里第一个input元素的type属性

$("form input:first").attar("type");

设置form下最后一个input元素的为只读文本框

$("form input:last").attar("readonly","readonly"); 

创建div元素,添加“啦啦啦”文本,iD属性,并添加到文本中

var divEl = document.createElement("div");  //创建一个divEl标签
divEl.setAttribute("id",""); //设置id
document.body.appenfChild(divEl); //将其加入到body中

上面是js是做法,下面是jQuery的实现方法

var div = $("<div id="XXX"></div>");
$("body").append("div");

3.删除id为sessionID的li元素

$("$sessionID").remove();   //删除sessionID的属性的标签

删除所有的li元素

$("li").remove();    //将所有的li删除

删除ul元素

$("ul").remove();

4.取出div中的内容

$("div").text();

取的<option>的值和描述[假如有一个城市列表的选择菜单]

var $option = $("#city option")  定位标签
var value = $option.val(); 获取标签中的值
var html = $option.text(); 将标签里的东西取出来

5.赋值元input中的元素,添加到input元素后,与其同级

 var $old =$(“:button”);  定位菜单
var $new = $old.clone(); 赋值
$new.val("新按钮");
$old.after($new)

总结:clone()没有参数的就只是复制样式,但是如果是clone(true)那么就是将事件也会复制过来

6.为table添加属性,比如添加border/align/width等属性,使用格式是

attr(“key”,"value")

将属性删除

removeAAyyr("key")

7.添加样式

将第一个标签添加样式
$("div:first").addclass("myClass");

将最后一个标签的样式删除掉

$("div:last").remove("myclass")

切换样式,将有样式的变为有样式,将有样式变为无样式了

$("div").toggleclass("myclass");

查看标签是否有样式

var flag=$(div:last).hasClass("myClass");返回boolean值

8.获取图片坐标

var offset = $("img").offset();
var y= offset.left;
var x= offset.top;
alert(x,y)

设置坐标

$("img").offset({top: left:})

获取图片高度

var w= $("img").width();
var w= $("img").height();

设置图片的高度

var w = $("img").width();
var x = $("img").height();

8.向上下滑动,按下按钮菜单下拉

$(“:button”).click(function(){
$(“div”). slideToggle();
});

总结:

jQuery的API

each():是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象
append():追加到父元素之后
prepend():追加到父元素之前
after():追加到兄弟元素之后
before():追加到兄弟元素之前
attr(name):获取属性值
attr(name,value):给符合条件的标签添加key-value属性对
$("<div id='xxID'>HTML代码</div>"):创建元素,属性,文本
remove():删除自已及其后代节点
val():获取value属性的值
val(""):设置value属性值为""空串,相当于清空
text():获取HTML或XML标签之间的值
text(""):设置HTML或XML标签之间的值为""空串
clone():只复制样式,不复制行为
clone(true):既复制样式,又复制行为
replaceWith():替代原来的节点
removeAttr():删除已存在的属性
addClass():增加已存在的样式
removeClass():删除已存在的样式
hasClass():判断标签是否有指定的样式,true表示有样式,false表示无样式
toggleClass():如果标签有样式就删除,否则增加样式
offset():获取对象的left和top坐标
offset({top:,left:}):将对象直接定位到指定的left和top坐标
width():获取对象的宽
width():设置对象的宽
height():获取对象的高
height():设置对象的高
children():只查询子节点,不含后代节点
next():下一下兄弟节点
prev():上一下兄弟节点
siblings():上下兄弟节点
show():显示对象
hide():隐藏对象
fadeIn():淡入显示对象
fadeOut():淡出隐藏对象
slideUp():向上滑动
slideDown():向下滑动
slideToggle():上下切换滑动,速度快点

jQuery常用的API的更多相关文章

  1. JQuery常用的api[最好是系统地学习一下《锋利的JQuery》]

    text http://api.jquery.com/text/ Get the combined text contents of each element in the set of matche ...

  2. jquery 常用api 小结2

    *一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...

  3. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  4. jquery中最常用的API有哪些

    jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...

  5. jQuery常用API之jQuery选择器

    3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...

  6. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  7. 24、jQuery常用AJAX-API/Java调用MySQL / Oracle过程与函数

      1)掌握jQuery常用AJAX-API 2)掌握Java调用MySQL / Oracle过程与函数 一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取 ...

  8. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  9. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

随机推荐

  1. jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. android webview 报 [ERROR:in_process_view_renderer.cc(189)] Failed to request GL process. Deadlock likely: 0 问题

    工作中遇到 使用webview中加载含有audio标签的页面时提示[ERROR:in_process_view_renderer.cc(189)] Failed to request GL proce ...

  3. HDU 4731 Minimum palindrome 打表找规律

    http://acm.hdu.edu.cn/showproblem.php?pid=4731 就做了两道...也就这题还能发博客了...虽然也是水题 先暴力DFS打表找规律...发现4个一组循环节.. ...

  4. split---将文件分割成多个小文件

    split命令可以将一个大文件分割成很多个小文件,有时需要将文件分割成更小的片段,比如为提高可读性,生成日志等. 选项 -b:值为每一输出档案的大小,单位为 byte. -C:每一输出档中,单行的最大 ...

  5. 网络流最大流dinic的板子

    void add(int u,int v,int w){ e[tot].v=v; e[tot].w=w; e[tot].nt=pre[u]; pre[u]=tot++; e[tot].v=u; e[t ...

  6. Log4j日志管理的简单实例

    大型项目中非常多情况下要分析程序的日志信息,怎样管理自己的日志信息至关重要. 在应用程序中加入日志记录总的来说基于三个目的 , 监视代码中变量的变化情况,周期性的记录到文件里供其它应用进行统计分析工作 ...

  7. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  8. 洛谷——P1816 忠诚

    https://www.luogu.org/problem/show?pid=1816#sub 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记 ...

  9. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

  10. lighttpd + php for android 安卓上的WEB服务器

    lighttpd + php for android 安卓上的WEBSER 这个项目在 http://hex.ro/wp/blog/php-and-lighttpd-for-android 目前不支持 ...