jquery 移除子节点_JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化

最新推荐文章于 2024-01-14 11:54:30 发布

贵妃奶黄包

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量138

点赞数

文章标签： jquery 移除子节点

本文链接：https://blog.csdn.net/weixin_34159899/article/details/113491426

版权

目标:Jquery

一.概述

1.JQuery是什么

jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多.

2.优点

（ 1）提供了强大的功能函数
（ 2）解决浏览器兼容性问题
（ 3）实现丰富的 UI 和插件
（ 4）纠正错误的脚本知识

3. 在页面引入

二、 jQuery 核心

三、 DOM 对象和 jQuery 包装集对象

明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提供的方法。

1. Dom 对象

2. jQuery 包装集|对象

3. Dom 转 jQuery 对象

4. jQuery 对象转 Dom 对象

四、 jQuery 选择器

jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。
基础选择器掌握即可 ,其他用到再查阅。

1. 基础选择器 Basics（掌握即可）

<script>
    // id选择器
    var div1 = $("#div1");
    console.log(div1);

    //类选择器
    var cls = $(".test");
    console.log(cls);

    // 元素选择器
    var divs = $("div");
    console.log(divs);

    // 通用选择器
    var all = $("*");
    console.log(all);

    // 组合选择器
    var group = $("#div1,span,.test");
    console.log(group);
</script>

2. 层次选择器 Hierarchy

<div id="parent">层次择器
    <div id="child" class="testColor">父选择器
        <div class="gray">子选择器</div>
        <p>PPPPPPPPPP</p>
        <img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
        <img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
    </div>
    <p>这是一个P</p>
    <div>
        选择器2<div>选择器2中的div</div>
    </div>
  
</div>
 
<script>
    // 后代选择器   ancestor descendant    $("#parent div")
var houdai = $("#parent div");
    houdai.each(function(){
        console.log(this);
    });
    console.log("==============");
  
    // 子代选择器   parent > child $("#parent>div")
var zidai = $("#parent > div");
    zidai.each(function(){
        console.log(this);
    });
    console.log("==============");
  
    // 相邻选择器   prev + next    $(".blue + img")  只会查询指定元素的下一个指定元素（只往下找一次元素）
var xl = $("#child + p");
    xl.each(function(){
        console.log(this);
    });
    console.log("==============");
  
    // 同辈选择器   prev ~ sibling $(".blue ~ img")
var tb = $(".gray ~ img");
    tb.each(function(){
        console.log(this);
    });
</script>

3. 表单选择器Forms

<script type="text/javascript">
   // 表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select
   // 非表单元素：div、span、p、h1~h6、img、a、table
var inputs = $(":input"); // 表单选择器，所有表单元素
console.log(inputs.length);
   var inputs2 = $("input"); //元素选择器
console.log(inputs2.length);
</script>

4.过滤选择器(用于<input>元素)

<script type="text/javascript">
   /**
      :checked 选择所有被选中的元素
      :eq(index) 匹配指定下标的元素      eq=equal
      :gt(index) 匹配下标大于指定值的所有元素     gt=great than
      :odd 选择每个相隔的（奇数） 元素
      :even 选择每个相隔的（偶数） 元素
    */

var checkboxs = $(":checkbox");
   checkboxs.each(function(){
      console.log(this);
      console.log(this.checked);
   });
   
   console.log("==============");
   
   var ckeckeds = $(":checkbox:checked");
   ckeckeds.each(function(){
      console.log(this);
   });
   
   console.log("==============");
   var second = $(":checkbox:eq(1)")
   second.each(function(){
      console.log(this);
   });
   
   
   console.log("==============");
   var gtfirst = $(":checkbox:gt(0)")
   gtfirst.each(function(){
      console.log(this);
   });
   
   
   console.log("==============");
   var odds= $(":checkbox:odd")
   odds.each(function(){
      console.log(this);
   });
</script>

五、 jQuery DOM 操作

jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式；动画操作等。注意：以下的操作方式只适用于 jQuery 对象。

1. 操作元素的属性

<!--
   获取属性的值
      attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。   attr('checked')
         attr('name')
      prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')

   设置属性的值
      attr(属性名称,属性值);
      prop(属性名称,属性值);

   移除属性
      removeAttr(属性名)    移除指定的属性    removeAttr('checked')

   如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();
-->

2. 操作元素的样式

<body>
  <!--
      attr(“class”)  获取class属性的值，即样式名称
      attr(“class”,”样式名”)
         修改class属性的值，修改样式
      addClass(“样式名”)     后面添加显示style:....
         添加样式名称
      css()  添加具体的样式     后面添加显示style:....
      removeClass(class)
         移除样式名称
   -->
<div id="div1" class="red">我是div1</div>
    <div id="div2">我是div2</div>
    <div id="div3" class="greenyellow">我是div3</div>
</body>
<script src="js/jquery-1.9.0.min.js"></script>
<script>
    /* attr */
    // 设置元素的class属性（如果属性不存在，则添加属性）
$("#div2").attr("class","red");
  
    // 如果属性存在，则修改属性值
$("#div1").attr("class","dodgerblue");
  
    // addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准
$("#div2").addClass("larger");
  
    // css()
    // 添加一个具体样式  css("样式名","样式值")
$("#div3").css("background","dodgerblue");
    // 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
$("#div3").css({"color":"red","font-family":"楷体"})
  
    //removeClass(class)移除样式名称
$("#div2").removeClass();
</script>

3. 操作元素的内容

4. 创建元素

5. 添加元素

6. 删除元素

<script>
    // remove()
$("#div1").remove();
  
    // empty()
$("#div2").empty();
</script>

7. 遍历元素

</body>
    <!--
        each()
        $(selector).each(function(index,element)) :遍历元素
        参数 function 为遍历时的回调函数，
        index 为遍历元素的序列号，从 0 开始。
        element是当前的元素，此时是dom元素。
    -->
<script>
    $(".green").each(function(index,element){
        console.log(index);
        console.log(this);
        console.log(element.innerHTML); //Dom对象取值
console.log($(element).text()); //Jquery对象取值
});
</script>

六、 Jquery 事件

1. ready()加载事件

<!--
			1.ready()加载事件
				ready()类似于 onLoad()事件
				ready()可以写多个，按顺序执行
				$(document).ready(function(){})等价于$(function(){})
				
				onload与ready()的区别：
					1、ready()在DOM结构解析完毕后即执行
					2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行
		-->
		<script type="text/javascript">
			// js的onlooad事件
			/*window.onload = function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			}*/
			
			// jquery的ready事件
			$(document).ready(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
			
			$(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
		</script>

2. bind()绑定元素事件

<body>
		<!--button元素，默认是提交按钮-->
		<button type="button" id="btn">按钮</button>
		<input type="text" id="txt" value="Hello Jquery" />
	</body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
	<!--
		 1.确定为哪些元素绑定事件
		 	获取元素
		 2.绑定什么事件（事件类型）
		 	第一个参数：事件的类型
		 3.相应事件触发的，执行的操作
		 	第二个参数：函数
	-->
	<script type="text/javascript">	
		/*绑定简单事件*/
		// js绑定事件
		/*document.getElementById("btn").onclick = function(){
			alert('这是个按钮。。。');
		};*/
		
		// bind()绑定事件
		/*$("#btn").bind("click",function(){
			alert('这是个按钮。。。');
		});*/
		
		// 直接绑定事件
		$("#btn").click(function(){
			alert('这是个按钮。。。');
		});
	
		/*绑定多个事件*/
		// 聚焦失焦事件
		// 方式一：
		$("#txt").focus(function(){
			// 聚焦时清空文本框
			$("#txt").val("");
		}).blur(function(){
			$("#txt").val("你好");
		});
		
		// 多个事件绑定一种行为
		$("#txt").bind("focus blur",function(){
			console.log("。。。");
		});
		
		$("#txt").bind("focus",function(){
			console.log("aaa");
		}).bind("blur",function(){
			console.log("bbb");
		});
		
		$("#txt").bind({
			focus:function(){
				console.log("链式编程1");
			},
			blur:function(){
				console.log("链式编程2");
			}
		});	
	</script>

贵妃奶黄包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 移除子节点_JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化

目标:Jquery一.概述1.JQuery是什么 jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多.2.优点（ 1）提供了强大的功能函数（ 2）解决浏览器兼容性问题（ 3）实现丰富的 UI 和插件（ 4）纠正错误的脚本知识3. 在页面引入 <script src="js/jquer...
复制链接

扫一扫