jquery中节点的操作以及一些其他方法的操作

Jquery中节点操作

1.   创建节点:

$(‘html字符串’): 如$(‘<p>hello jquery</p>’);

2.   添加节点:

append  ,  appendTo  添加到元素内容的最后面

    $(‘.father‘).append($(‘p‘));
    $(‘h2‘).appendTo($(‘.father‘));

prepend ,  prependTo  添加到元素内容的最前面

   $(‘.father‘).prepend($(‘p‘));
    $(‘h2‘).prependTo($(‘.father‘));

before -- -> $A.before($B)  将B扔到A的前面(兄弟关系,相邻)

    $(‘.son‘).before($(‘.son2‘));

after-- -> $A.after($B)  将B扔到A的后面(相邻,兄弟关系)

    $(‘.son‘).after($(‘.son2‘));

3.   删除节点

Remove()自杀型

4.   清除节点

Empty()清空所有内容

5.   克隆节点

Clone(参数) [都是深拷贝]

False:默认值,克隆结构,不克隆事件

True: 克隆结构,也克隆事件

$(‘p’).clone(true)

6.   其他的一些方法:

Val() 获取和设置value值

Html()设置或获取html值,相当于innerHtml

Text()设置和获取text文本值,相当于innerText

获取盒子的宽高

Width/height  ----------- content

innerWidth/innerheight -------content + padding

outerwidth/ outerheight --------content +padding + border

outerwidth(true)/outerheight(true) -----content + padding + border + margin

滚动事件中获取设置以及实现animate动画的方法---scrollTop

1.    获取页面卷曲的高度

$(window).scrollTop()

底层js的实现则是通过

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

2.    设置页面卷曲的高度

$(window).scrollTop(值)

底层js的实现; document.documentElement.scrollTop(值)

pageYOffset 是只读属性,不能用于设置操作

3.    实现animate动画时,需要给html设置

$(‘html‘).animate({ scrollTop: 0 });

Offset()获取的是距离整个document页面左顶点的距离

返回值是个对象:如 {left:200,top:200}

Position()获取的是距离最近的有定位的祖辈元素的距离

返回值是个对象: 如{left:200,top:200}

原文地址:https://www.cnblogs.com/z-lin/p/11106150.html

时间: 2024-10-02 11:45:26

jquery中节点的操作以及一些其他方法的操作的相关文章

jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

jquery中append、prepend, before和after方法的区别(一)

原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() 与before()是在元素的外面插入内容(其内容变成元素的兄弟节点). 1. append()和prepend() <div class='a'> <div class='b'>b</div> </div> 1 2

jquery中attr() &amp; prop() 的区别与其实现方法

$(function(){ $('#check').attr('checked'); // undefind ???一头雾水 }) 在jquery中 attr 本来就是用来设置或者获取属性的,可是上面的方法却返回给 undefined ? 然后我尝试用 $('#check').prop('checked'); 发现可以正常运行!! 在jquery中prop是相对来说版本比较新的一个方法,乍一看它的功能好像和attr没有什么很大的差别,的确,它们都可设置或者来获取属性,比如 $('#div').a

web开发过程中经常用到的一些公共方法及操作

1.JSON转换操作 包含List转换成Json的默认格式:List转换成Json处定义格式:对象转换为Json:对象集合转换Json:普通集合转换Json:DataSet转换为Json:Datatable转换为Json:DataReader转换为Json #region 私有方法 /// <summary> /// 过滤特殊字符 /// </summary> private static string String2Json(String s) { StringBuilder s

js、jquery中判断checkbox是否被选中的方法

在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input[type='checkbox']").is(':checked') 返回true或false attr()方法  设置或者返回备选元素的值 attr(属性名)    //获取属性的值 attr(属性名,属性值)   //设置属性的值 ---- $("#id]").attr(&q

jquery中ajax使用error调试错误的方法,实例分析了Ajax的使用方法与error函数调试错误的技巧

代码:$(document).ready(function() {            jQuery("#clearCac").click(function() {                jQuery.ajax({                    url: "/Handle/Do.aspx",                    type: "post",                    data: { id: '0' }

JQuery中的find、filter和each方法学习

find() 概述 搜索所有与指定表达式匹配的元素.这个函数是找出正在处理的元素的后代元素的好方法. 所有搜索都依靠jQuery表达式来完成.这个表达式可以使用CSS1-3的选择器语法来写. 参数 exprStringV1.0 用于查找的表达式 jQuery object objectV1.6 一个用于匹配元素的jQuery对象 elementDOMElementV1.6 一个DOM元素 示例 描述: 从所有的段落开始,进一步搜索下面的span元素.与$("p span")相同. HT

Electron与jQuery中$符号冲突的三种解决方法

在Electron工程中引用jQuery时,经常会出现以下错误: Uncaught ReferenceError: $ is not defined 解决的具体方法如下: ①.在测试的过程中(测试过1.10.1,以及当前最新的3.2.1版本都不行),发现只要使用2.03版本的jQuery或者2.2.0版本的jQuery,就不会出现$未定义的情况. ②.使用jQuery原有的关键字jQuery()来替代$(),或者自定义关键字. <script type="text/javascript&q

jquery中ifram子窗体调用父窗体方法、父窗体调用子窗体方法

//调用子窗体中的方法. var childWindow = $("#AddFrame")[0].contentWindow;//获取子窗体的window对象 childWindow.subForm(); //调用父窗体中的方法 window.parent.afterAdd();