JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

√し艾米°

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/qq_45452698/article/details/100546668

版权

JQuery

http://jquery.com 下载网址

学习重点

(1) 基础选择器（id选择器、类选择器、元素选择器）

(2) 操作元素的内容（html、text、val）

(3) 创建元素 $(“元素内容”)

(4) 添加元素（append、prepend）

(5) 删除元素（remove）

(6) 事件绑定 ( bind )

一、转换

1)DOM转JQuery

var dom = document.getElementById('id') //获取DOM对象
var jquery = $(dom);

2)Query转DOM

//先获取到jquery对象,是一个数组
var jquery = $("#id");
// 可以遍历对象数组获取到每一个dom对象
var dom = jquery[0];

二、遍历

// 必须是jQuery对象才可以调用
$('选择器').each(function(index,element){
    console.log(index);	//索引 从0开始
    console.log(element); //当前元素,此时是dom元素
    console.log(this); //同上,代表当前元素
})

三、基本选择器

<!--
id选择器		  #id属性值			$("#id属性值")			如果出现同名ID，只会获取第一个
元素选择器		元素名/标签名		  $("标签名/元素名")			选择所有指定元素的包装集对象
类选择器		.class属性值		 $(".class属性值")			选择class属性是指定值的元素
 #↑ 上面的重点掌握
选择所有选择器			*				$("*")					选择页面中所有的元素
组合选择器		选择器1,选择器2... $("选择器1,选择器2...")		选择所有指定选择器选中的元素
-->

四、层次选择器

<!--
后代选择器			ancestor descendant		$("#id属性名 div")	
					#以空格分隔，选择id为parent的元素的所有div元素,包含孙子
                                
子代选择器			parent > child			$("#id属性名>div")	
					#以大于号">"分隔，选择id为parent的直接div子元素,不包含孙子
                                
相邻弟弟选择器			prev + next				$(".class属性名 + img")	
					#以加号"+"分隔，选择class类为blue的下一个img元素,最近的下一个
                                
同辈弟弟选择器			prev ~ sibling			$(".class属性名 ~ img")	
					#以波浪号"~"分隔，选择css类为blue的之后的img元素
-->

五、过滤选择器

<!--
属性选择器
$("[属性名]") 		获取设置过指定属性的元素
$("[属性名=属性值]")	获取指定属性名为指定值的元素 

过滤选择器
:checked		获取所有被选中状态的元素（单选框、复选框）
:selected		获取下拉框的选中项
:eq(index)		匹配指定下标的元素
:gt(index)		匹配大于指定下标的元素
:odd			匹配奇数下标  从0索引开始
:even			匹配偶数下标  从0索引开始
-->

姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />

爱好:  <input type="checkbox" name="ufav" value="篮球" checked="checked"/>篮球
	  <input type="checkbox" name="ufav" value="爬床"/>爬床
	  <input type="checkbox" name="ufav" value="代码" checked="checked"/>代码<br />

来自:<select id="ufrom" name="ufrom">
	<option value="-1" >请选择</option>
	<option value="0" selected="selected">北京</option>
	<option value="1">上海</option>

获取设置过指定属性的所有元素

// $("[属性名]") 		
var ids = $("[id]");

获取指定属性名为指定值的所有元素

// $("[属性名=属性值]")	
var cks = $("[name='ufav']");
var cks2 = $("[type='checkbox']");

获取所有被选中状态的元素（单选框、多选框）

// :checked		
var cked = $(":checkbox:checked")			//获取单选框 被选中的元素
var cked1 = $(":checkbox:checked:eq(1)");   //eq 获取指定索引的元素
var cked2 = $("[name='ufav']:gt(0)");	 	//gt 获取大于指定索引的元素

获取指定下拉框的选中项

// :selected		
var sels = $("#ufrom option");
var sel = $("#ufrom option:selected");

六、操作元素属性

attr与prop都可以获取固有属性（元素本身就有的属性）
attr可以操作自定义属性，prop不可以
prop操作返回值是布尔类型的属性会返回true或false；attr操作返回具体的值，若未设置该属性，则undefined

总结：返回值是布尔类型的属性，使用prop方法，其他使用attr方法

返回值是布尔类型的属性：checked、selected、disabled

<input id="ck" type="checkbox" aa="lalala" name="ch" checked="checked" value="a"/>

// 获取固有/自定义属性
var type1 = $("#ck").attr("type");
var type2 = $("#ck").prop("type"); //注意prop 不能操作自定义属性

// 设置属性
$("#ck1").prop("属性名","属性值");
$("#ck1").prop("value","嘻嘻嘻");
$("#ck1").prop("checked",false);

// 移除属性
$("#ck1").removeAttr("aa");
$("#ck1").removeAttr("name");

七、操作元素样式

<style type="text/css">
			div{
			    padding: 8px;
			    width: 180px;
			}
			.blue{
				background: blue;
			}
			.larger{
				font-size: 30px;
			}
			.green {
				background : green;
			}
</style>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed" class="green">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>

// 获取样式名--> attr(属性);
var cls = $("#conBlue").attr("class");

// 设置元素的样式名-->会直接覆盖原来的属性值
$("#conBlue").attr("class","green");

// addClass(“样式名”) --> 给class 追加 样式属性
$("#conBlue").addClass("larger");
$("#conBlue").addClass("blue");

#// css() 添加具体的样式 --> 重点掌握,添加到标签的行内属性
$("#conRed").css("color","red");
$("#conRed").css("background","pink");
$("#conRed").css({'font-size':'20px','font-family':'楷体'});
		
// removeClass(class)      移除指定名称的样式
$("#remove").removeClass("blue");

八、操作元素内容

html()与text()方法操作的是非表单元素，val()操作的是表单元素

非表单元素：

div、span、a、h1~h6、p、table、tr、th、td、img、ul、li、ol

表单元素：

text、password、radio、checkbox、select、textarea、file、hidden

<div id="html"></div>
<div id="text"></div>
<input type="text" id="uname" value="oop" />

#// 获取指定ID的非表单元素
var html = $("#html").html(); 	//连同html标签一起获取
var txt = $("#html").text();  	//只获取标签内的文本

#// 获取指定ID的表单元素
var uname = $("#uname").val(); 	//获取表单内的元素

#// 设置指定id的非表单元素 --> 直接覆盖原有元素
$("#html").html("上海");		
$("#html").html("<h2>上海</h2>");
// text()
$("#text").text("上海");
$("#text").text("<h2>上海</h2>");

#// 设置指定id的表单元素
$("#uname").val("元素内容");

九、创建元素

直接创建

$("元素内容")
$("<div>元素内容</div>")

十、添加元素

1) prepend(content) :

在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

2) append(content) :

在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

// 创建元素
var sp = "<span>老腊肉</span>";

// 添加到前面 prepend( );
$('指定元素名1').prepend(sp);

// 添加到后面 append( );
$('指定元素名1').append(sp);

#//如果已存在的元素追加到指定元素的内部：相当于将已存在的元素剪切到指定元素内部，原来的元素会被移除
$('指定元素名2').prepend(sp);  // 前面

$('指定元素名2').append(sp);	  // 后面

十一、删除元素

1) remove()

删除所选元素或指定的子元素，包括整个标签和内容一起删。

2) empty()

清空所选元素的内容,标签依然保留,–>不怎么用

// remove
$("选择器").remove();

// empty
$("选择器").empty();

十二、事件(加载 ready)

onload事件：当文档中的dom结构和资源加载完毕后执行

ready预加载事件：当文档中的dom结构加载完毕后执行,效率更高

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$document).ready( function ( ){ } )等价于$ (function( ){ })

十三、事件绑定( bind )

//可以给一个button按钮
<button id="btn">按钮</button>;

//模板-->一个事件绑定
$("选择器").bind("什么事件",函数)
// 模板-->多个事件绑定
$("选择器").bind("什么事件",函数).bind("什么事件",函数)....可以继续加

// 例如 --> 点击事件
$("#btn").bind("click",function(){
	alert("知识就是力量！");
});

√し艾米°

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

JQueryhttp://jquery.com 下载网址学习重点(1) 基础选择器（id选择器、类选择器、元素选择器）(2) 操作元素的内容（html、text、val）(3) 创建元素 $(“元素内容”)(4) 添加元素（append、prepend）(5) 删除元素（remove）(6) 事件绑定 ( bind )...
复制链接

扫一扫