二jquery基本操作(1)

1.三种创建元素的操作:

可以使用$直接创建元素

1.1线上模式

//线上模式
for(var i=0;i<10;i++){
   var tag = $("<p>"+i+"</p>")
   $('body').append(tag);
}

结果:


1.2线下组装模式(性能更好)

var html="";
for(var i=0;i<10;i++){
  html+="<p>"+i+"</p>";
    
}
var newTag = $(html);
$("body").append(newTag);

结果:


1.3长页面的拼接模式

//格式不对匹配不了
var fun=function(){/*
<ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
<ul>
    */}//toString不改变原始值
    
$(function(){
     var ss= fun.toString();
    //replace也不改变原始值
    //function后面要加一个空格
    //字符串的操作复习
    var m = ss.replace("function (){/*","").replace("*/}","");
    
    $("body").append(m);
})

结果:


2.获取内容的三种操作

2.1text()获取或设置对象的文本内容

2.2html()获取或设置对象的子节点

2.3val()获取或设置对象的值(只支持有value对象的对象如input)

不需要跟后台处理的时候可以使用这种方式获取客户端的密码

3.添加节点的8种方式

after() before() prepend() append()
insertAfter() insertBefore()prependTo() appendTo()
上下这四种一一对应

4.删除节点的两种方式

4.1remove()

删除被选元素本身

可以带一个选择器作为参数

删除类的函数都会返回删除前被选择器选择的对象(只要不用shift+delete就会进入回收站)

4.2empty()

删除被选元素子元素

5其它文档操作

5.1使用jquery替换其它节点

replaceAll()replaceWith()

5.2使用jquery包裹节点或者移除包裹(不常用)

wrap() wrapAll() wrapinner() unwrap()

5.3使用jquery克隆节点(不常用)

需要把它加入到dom中,可以用变量把它存起来
clone();
这篇文章jquery相关代码源码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,506评论 0 44
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,700评论 18 503
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,635评论 0 11
  • 10号看到一则新闻: 山东烟台海阳市英才实验学校被指食堂用鸡饲料和猪饲料给孩子熬稀饭喝。而且有图片,家长报料。 当...
    此陈非彼阅读 277评论 0 0
  • 文字补充:灰姑娘去浇花,在路上她看见苹果树,她突然想去参加王子的舞会,忽然一个小精灵出现,把她变得非常美丽。 宝宝...
    名侦探步美阅读 943评论 0 4