Jquery核⼼$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， "jQuery"是核⼼对象。 通过该对象可以获取jQuery对象，调⽤jQuery提供的⽅_package后代选择器">
devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2020-08-31_package后代选择器

作者：花生_TL007 | 2024-05-23 15:23:18

赞

踩

package后代选择器

JQuery

1.主要内容

在这里插入图片描述

2.JQuery对象

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

安装

<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

  • 1

Jquery核⼼
$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， "jQuery"是核⼼对象。 通过该对象可以获取jQuery对
象，调⽤jQuery提供的⽅法等。只有jQuery对象才能调⽤jQuery提供的⽅法。

$ <==> jQuery

  • 1

Dom对象 与 Jquery包装集对象

Dom对象
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

  • 1
  • 2
  • 3
JQuery包装
var jQueryObject = $("#testDiv");

  • 1
  • 2
jQuery对象转dom对象
// 第⼀种⽅式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第⼆种⽅式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过 $() 转为 jQuery 对象
$('#mydiv').each(function() {//遍历
var jquery = $(this);
})

  • 1
  • 2
  • 3
  • 4

Jquery选择器

基础选择器
id选择器 #id $("#testDiv")选择id为testDiv的元素
元素名称选择器 element $(“div”)选择所有div元素
类选择器 .class $(".blue")选择所有class=blue的元素
选择所有元素 * $("*")选择⻚⾯所有元素
组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素

<style type="text/css">
.blue{
background: blue;
}
</style>
<body>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// id选择器
console.log("======id====");
var idSelecter = $('#mydiv1');
console.log(idSelecter.html());
console.log(idSelecter.text());
// 元素选择器
console.log("======name====");
var nameSe = $('div'); // 有多个div元素
nameSe.each(function(){
// this是dom对象， $(this)是jquery对象
console.log($(this).text());
});
// 类选择器， class
console.log("======class====");
var classSe = $('.blue'); // 有多个class=blue的元素
classSe.each(function(){
console.log($(this).text());
});
// 通⽤选择器： *
console.log("======所有元素====");
var all = $("*");
console.log(all.length);
// 组合选择器
console.log("======组合====");
var unionSe = $('span, .blue,div');
unionSe.each(function(){
console.log($(this).text());
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

层次选择器
后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
⼦代选择器 parent > child $("#parent>div")选择id为parent的直接div⼦元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下⼀个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
<script src="js/jquery-3.4.1.js" type="text/javascript">
<style type="text/css">
.testColor{
background: green;
}
.gray{
background: gray;
}
</style>
</head>
<body>
<div id="parent">层次择器
<div id="child" class="testColor">⽗选择器
<div class="gray">⼦选择器</div>
<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>
<div>
选择器2<div>选择器2中的div</div>
</div>
</div>
</body>
<script type="text/javascript">
console.log("=========后代选择器-选择所有后代=====");
var ancestorS = $('#parent div');
ancestorS.each(function(){
console.log($(this).text());
});
console.log("=========⼦代选择器-选择⼉⼦辈=====");
var child = $('#parent>div');
child.each(function(){
console.log($(this).text());
});
console.log("=========相邻选择器=====");
var pre_next = $(".gray + img");
console.log(pre_next.length);
console.log("=========同辈选择器,其后，（弟弟） =====");
var pre_siblings = $(".gray ~ img");
console.log(pre_siblings.length);
</script>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

表单选择器
表单选择器 :input 查找所有的input元素： $(":input")；注意：会匹配所有的input、 textarea、 select，button元素。
⽂本框选择器 :text 查找所有⽂本框： $(":text")
密码框选择器 :password 查找所有密码框： $(":password")
单选按钮选择器 :radio 查找所有单选按钮： $(":radio")
复选框选择器 :checkbox 查找所有复选框： $(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮： $(":submit")
图像域选择器 :image 查找所有图像域： $(":image")
重置按钮选择器 :reset 查找所有重置按钮： $(":reset")
按钮选择器 :button 查找所有按钮： $(":button")
⽂件域选择器 :file 查找所有⽂件域： $(":file")

Jquery Dom操作

操作：查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的
值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。
操作元素的属性
1.获取属性
attr(属性名称) 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。
attr(‘checked’)
attr(‘name’)
prop(属性名称) 获取具有true和false两个属性的属性值 prop(‘checked’)
2.设置属性
attr(属性名称，属性值)设置指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。
attr(‘checked’,’checked’)
attr(‘name’,’zs’)
prop(属性名称，属性值) 设置具有true和false的属性值 prop(‘checked’,’true’)
3.移除属性
removeAttr(属性名) 移除指定的属性 removeAttr(‘checked’)

操作元素的样式
attr(“class”) 获取class属性的值，即样式
attr(“class”,“样式名”) 修改class属性的值，修改样
addClass(“样式名”) 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称

增加元素的具体样式，格式：
1） css({‘样式名’:’样式值’,’样式名2’:’样式值2’})
例： css({“background-color”:“red”,“color”:"#fff"});
2） css(“样式名”,”样式值”)
例： css(‘color’,‘white’)

操作元素的内容
html() 获取元素的html内容
html(“html, 内容”) 设定元素的html内容
text() 获取元素的⽂本内容，不包
text(“text 内容”) 设置元素的⽂本内容，不包
val() 获取元素value值
val(“值”) 设定元素的value值

创建元素
在jQuery中创建元素很简单，直接使⽤核⼼函数即可`

$('元素内容');
$('<p>this is a paragraph!!!</p>');

  • 1
  • 2

添加元素
prepend(content) 在被选元素内部的开头插⼊元素或内容，被追加的 content 参数，可以是字符、 HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加⼊ selector 元素开头
append(content) 在被选元素内部的结尾插⼊元素或内容，被追加的 content 参数，可以是字符、 HTML 元素标记。
( c o n t e n t ) . a p p e n d T o ( s e l e c t o r ) 把 c o n t e n t 元 素 或 内 容 插 ⼊ s e l e c t o r 元 素 内 ， 默 认 是 在 尾 部 b e f o r e ( ) 在 元 素 前 插 ⼊ 指 定 的 元 素 或 内 容 : (content).appendTo(selector) 把 content元素或内容插⼊selector 元素内，默认是在尾部 before() 在元素前插⼊指定的元素或内容: (content).appendTo(selector)把content元素或内容插⼊selector元素内，默认是在尾部before()在元素前插⼊指定的元素或内容:(selector).before(content)
after() 在元素后插⼊指定的元素或内容:$(selector).after(content)

删除元素
remove() 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
empty() 清空所选元素的内容

遍历元素
each()
$(selector).each(function(index,element)) :遍历
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。

Jquery事件

ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执⾏
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 等 价 于 (document).ready(function(){})等价于 (document).ready(function())等价于(function(){})
bind()绑定事件
为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。
$(selector).bind( eventType [, eventData], handler(eventObject));
这类类型可以包括如下：
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]：传递的参数，格式： {名:值,名2:值2}
handler(eventObject)：该事件触发执⾏的函数

Jquery Ajax

jquery 调⽤ ajax ⽅法：
格式： $.ajax({});
参数：
type：请求⽅式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调⽤此函数
error：请求失败时调⽤此函数

------date.json
{
	"code":1,
	"msg":"成功",
	"result":[
		{
			"uname":"小白",
			"upassword":"143423ad",
			"uage":18,
			"ujob":"cxy",
			"usex":true
			
		},{
			"uname":"小红",
			"upassword":"1434",
			"uage":18,
			"ujob":"jr",
			"usex":false
			
		},{
			"uname":"小绿",
			"upassword":"143423d",
			"uage":18,
			"ujob":"jr",
			"usex":true
			
		}
		
	]

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
-------------jquery Ajax.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>	
		<div id="div1" align="center"></div>
		<script type="text/javascript">
			$.ajax({
			type:"get",
			url:"js/date.json",
			success:function(date){
				var tab=$("<table align='center' width=600 border=1 style='border-collapse: collapse;'></table>");
				var src="<tr ><th>名字</th><th>密码</th><th>年龄</th><th>工作</th><th>性别</th></tr>";
				tab.append(src);
				if(date.code==1){
					var arrobject=date.result;
					for(var i=0;i<arrobject.length;i++){
					var obj	=arrobject[i];
					var sxe=obj.usex?'男':'女';
					var dat="<tr><td>"+obj.uname+"</td><td>"+obj.upassword+"</td><td>"+obj.uage+"</td><td>"+obj.ujob+"</td><td>"+sxe+"</td></tr>";
						tab.append(dat);
					}
				$("#div1").append(tab);
	
				}else{
					
					$("#div1").html("<h1>失败</h1>");
				}
		
			}
	
		});
		</script>	
	</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

$.get
这是⼀个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

// 1.请求json⽂件，忽略返回值
$.get('js/cuisine_area.json');
// 2.请求json⽂件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});
// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
console.log(data);
});
// 4.请求json⽂件,传递参数,拿到返回值
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data);
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

$.post

// 1.请求json⽂件，忽略返回值
$.post('../js/cuisine_area.json');
// 2.请求json⽂件，传递参数，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});6.4. $.getJSON
表示请求返回的数据类型是JSON格式的ajax请求
// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
console.log(data);
});
// 4.请求json⽂件,传递参数,拿到返回值
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data);
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

$.getJSON
表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});

  • 1
  • 2
  • 3
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/613393
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号