jQuery1 DOM操作

最新推荐文章于 2024-04-10 10:06:32 发布

原创最新推荐文章于 2024-04-10 10:06:32 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

jsp 专栏收录该内容

7 篇文章

订阅专栏

博客主要介绍了信息技术领域中关于对象和HTML元素的操作。包括获取对象并判断其类型，使用appendto在HTML中添加元素，检查元素数量、提取元素以及获取父元素等内容。

获取对象判断对象类型

$(function(){
  var DOMobj=document.getElementById("div");
  var jQueryobj=$('#div');
  console.log(DOMobj);
  console.log(jQueryobj);

  //检测DOM 和jQuery对象
  if(DOMobj.nodeType){
    console.log("666 is nodeType");
  }else console.log("000 not nodeType");

  if (jQueryobj.jquery){
    console.log("is jQuery");
  }

  $(function() {

var dom=document.getElementById("div");
var jqu=$('#div');

console.log(dom);
console.log(jqu);
console.log(dom.jquery); //length=1 
console.log(dom.nodeType);

console.log(jqu.nodeType);
console.log(jqu.jquery);  //若是jQuery对象 返回版本号
console.log($('aas'));  //未选中对象 length=0;



//对象转换
    console.log($(DOMobj));

    console.log(jQueryobj.get(0));

})

appendto 在html中添加元素

$(function(){
  var link1=$('<a>',{
    text:'baiduAHuLa',
    href:'http://www.baidu.com',
    target:'_blank', //??
    title:'goto baidu'
  });
  //添加元素到html中
  link1.appendTo('body');

检查元素数量提取元素

<body>

  <div id='div'>lalala</div>


  </div>

  <ul>
  <ol>ame1</ol>
  <ol>ame2</ol>
  <ol>ame3</ol>
  <ol>ame4</ol>
  <ol>ame5</ol>
<div></div>

  </ul>


</body>

  var elements=$('ol');
    console.log(elements); //length==5

  var div=$('div');
  console.log(div);  //length==2

	//返回 dom元素
  console.log(elements.get(-1));  //返回最后一个元素
  console.log(elements[0]);  //倒数第二个安苏
	//返回jquery对象

获取父元素

	console.log($('#ele_id').parents('ele_type'));
	
  console.log($('#info').parent(),"--------");
  console.log($('#info').parents());  //获取父元素
  console.log($('#info').parents('ul'));   
  console.log($('#info').children());  //获取子元素
  console.log($('#uul').contents());  //获取子元素和文本元素