二jquery基本操作(1)

作者: 向布谷鸟说早安 | 来源:发表于2017-02-11 20:58 被阅读20次

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相关代码源码

相关文章

  • 二jquery基本操作(1)

    1.三种创建元素的操作: 可以使用$直接创建元素 1.1线上模式 结果: 1.2线下组装模式(性能更好) 结果: ...

  • 二jquery基本操作(2)

    1jquery对样式的操作(类) 1.1增加/删除样式 1.1.1addClass()1.1.2removeCla...

  • jQuery 基础

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • 五、jQuery操作css、位置属性和尺寸属性

    jQuery操作css属性jQuery操作位置属性jQuery操作尺寸属性 1. jQuery操作css属性 逐个...

  • JQuery基础知识

    jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样式 css操作...

  • 2018-04-08

    JQuery 赋值基本操作整理,(转)

  • jQuery基本操作

    jquery选择器 选择集转移 click事件 jquery索引值 jquery选项卡 jQuery属性操作

  • JQuery基本操作

    (1)jQuery加载 jQuery加载 // alert();//弹...

  • jQuery基本操作

    1、文本操作: 2、样式操作:addClassremoveClasstoggleClass例如: 3、属性操作:

网友评论

    本文标题:二jquery基本操作(1)

    本文链接:https://www.haomeiwen.com/subject/bsxnittx.html