1:核心.each(callback),size(),length(),get([index])

1.1 .each(callback)通过它可以遍历对象、数组的属性值并进行处理

    <form id="form1" runat="server">
<img/><img/>
</form> <script type="text/javascript">
$(function () {
$("img").each(function (i) {
this.src = "test" + i + ".jpg";
});
})
</script>
$(document).ready(function () {
var members = ["张三", "李四", "王老五", "赵老六", "王二麻子"];
var ol = $("ol");
$.each(members, function (index, item) {
ol.append("<li>" + item + "</li>");
})
});

1.2 .size()当前匹配的元素个数

<img src="test1.jpg"/> <img src="test2.jpg"/>

$("img").size();-->显示为:

1.3 .length()同样是返回元素个数

<img src="test1.jpg"/> <img src="test2.jpg"/>

$("img").length;-->显示为:

1.4 .get([index])取得其中一个匹配的元素,没有参数时则取得所有匹配的 DOM 元素集合。有参数时取得第 index 个位置上的元素。$(this).get(0)与$(this)[0]等价

<img src="test1.jpg"/> <img src="test2.jpg"/>

$("img").get();-->获得dom无素: <img src="test1.jpg"/>

2:文档处理.append(content|fn)与appendTo(content),prepend(content|fn)与prependTo(content)

2.1 .append(content) 参数content向每个匹配的元素内部追加内容,而content则是要追加到目标中的内容[$(A).append(B): 将B追加到A中];

    <div id="My_Div"></div>

    <script type="text/javascript">
$(function () {
$("#My_Div").append("<span style='color:red'>踏浪帅</span>")
})
</script>

2.2 .append(fn) 参数function(index, html)返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这
个对象原先的html值。

     <div></div>
<div></div> <script type="text/javascript">
$(function () {
$("div").append(function (index) {
return "<span style='color:red'>踏浪帅" + index + "</span>";
});
})
</script>

2.3 .appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中,参数content用于被追加的内容;[$(A).append(B): 将A追加到B中]

<p>I would like to say: </p>
<div></div><div></div> $("p").appendTo("div"); 结果: <div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

2.5 .prepend(content) 向每个匹配的元素内部前置内容,参数要插入到目标元素内部前端的内容

<p>I would like to say: </p>

$("p").prepend("<b>Hello</b>");--><p><b>Hello</b>I would like to say: </p> 

2.6 .prepend(fn) 参数function(index, html)返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值

     <div></div>
<div></div> <script type="text/javascript">
$(function () {
$("div").prepend(function (index) {
return "<span style='color:red'>踏浪帅" + index + "</span>";
});
})
</script>

2.7 .prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中

<p>I would like to say: </p><div id="foo"></div>

$("p").prependTo("#foo");

结果:<div id="foo"><p>I would like to say: </p></div>

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

Jquery重新学习之四[核心属性与文档处理属性]的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. jQuery 源码分析和使用心得 - 文档遍历 ( traversing.js )

    jQuery之所以这么好用, 首先一点就是$()方法和它强大的选择器. 其中选择器使用的是sizzle引擎, sizzle是jQuery的子项目, 提供高效的选择器查询. 有个好消息告诉大家, 就是s ...

  3. SpringBoot学习笔记:Swagger实现文档管理

    SpringBoot学习笔记:Swagger实现文档管理 Swagger Swagger是一个规范且完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务.Swagger的目标是对RE ...

  4. 基本控件文档-UILabel属性

    CHENYILONG Blog 基本控件文档-UILabel属性 Fullscreen UILabel属性技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http ...

  5. 基本控件文档-UITextField属性

    CHENYILONG Blog 基本控件文档-UITextField属性 Fullscreen   UITextField属性技术博客http://www.cnblogs.com/ChenYilong ...

  6. 基本控件文档-UIButton属性

    CHENYILONG Blog 基本控件文档-UIButton属性 Fullscreen UIButton属性技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博ht ...

  7. 基本控件文档-UISlider属性

    CHENYILONG Blog 基本控件文档-UISlider属性 Fullscreen     UISlide属性技术博客http://www.cnblogs.com/ChenYilong/ 新浪微 ...

  8. 基本控件文档-UISegment属性

    CHENYILONG Blog 基本控件文档-UISegment属性 Fullscreen   UISegment属性技术博客http://www.cnblogs.com/ChenYilong/ 新浪 ...

  9. 基本控件文档-UISwitch属性

    CHENYILONG Blog 基本控件文档-UISwitch属性 Fullscreen     UISwitch属性 技术博客http://www.cnblogs.com/ChenYilong/ 新 ...

随机推荐

  1. Test20171009 考试总结 NOIP模拟赛

    题目难度合适,区分度适中,但是本人水平不佳,没有拿到满意的分数. T1(matrix) 一种比较容易想到的想法是枚举起点求出最长全1串做预处理,这是O(n^2)的. 接着枚举列起点,列终点,通过后缀和 ...

  2. vagrant 常用命令以及常用操作

    列出这些命令,主要是防止脑内存不足.目前这些命令是我常用的,以后其他命令用的多,我再继续添加... 分享些本人用的百度网盘box,国外的太坑... 本人分享的百度网盘:http://pan.baidu ...

  3. 整数求和 Exercise07_21

    import java.util.Scanner; public class Exercise07_21 { /** * @param 冰樱梦 * 时间:2018年12月 * 题目:整数求和 */ p ...

  4. Android消息机制——Handler

      /**android的消息处理有三个核心类:Looper,Handler和Message.其实还有一个MessageQueue(消息队列), * 但是MessageQueue被封装到Looper里 ...

  5. 如何在Ubuntu中用firefox浏览器查看chm文档?

    首先下载这插 件:在firefox中点击“工具”->“附加软件”->“扩展”,在firefix扩展网页下搜索“"chmfox" 然后安装,重启后就可以了.

  6. Intellij Idea使用及配置

    1.JDK设置及修改工程JDKFile-->Project Structure: project SDK--New a jsdk默认JDKFile ->Other Settings-> ...

  7. js判断移动设备

    在开发中可能需要去判断用户的设备重定向到相应的网址: 1. 判断 iPhone  Android  iPod if((navigator.userAgent.match(/iPhone/i))||(n ...

  8. 水平ListView

    /* * HorizontalListView.java v1.5 * * * The MIT License * Copyright (c) 2011 Paul Soucy (paul@dev-sm ...

  9. 用10张图来看机器学习Machine learning in 10 pictures

    I find myself coming back to the same few pictures when explaining basic machine learning concepts. ...

  10. HDU1230 火星A+B

    火星A+B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...