jQuery
对象类型
1.HTML dom对象,常规的对象
2.jQuery对象
两种对象的方法和属性不一样,使用要区分,两种对象可以互转
jQuery->HTML( jQuery对象[0])
HTML->jQuery( $(HTML对象) )
如果你对HTML对象熟悉,可以用jQuery选择上元素后转换为HTML
开始使用
(document)document本身是HTML对象,用(document)document本身是HTML对象,用()括起来就变成了jQuery对象
$(document).ready(function(){
// 在这里写你的代码...
});
以上代码类似于
window.onload=function(){
// 在这里写你的代码...
}
jQuery初始化简写为:
$(function(){
// 在这里写你的代码...
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.js" type="text/javascript"></script>
<script>
$(function () {
alert($('body')[0])
// jQuery对象转HTML对象,并使用HTML对象的属性和方法来操作
$('body')[0].style.border='1px solid red'
$('body').css('height','100px')
//document.getElementsByTagName("body")[0]
//document.body
</script>
</head>
</body>
</html>
选择器
基本
<script>
$(function () {
// id选择器
$('#div1').css('border', '1px solid red');
// 类选择器
$('.c1').css('border', '1px dotted blue');
// 标签选择器
$('div').css('color', 'green');
// 全选中
$('*').css('font-size', '30px');
// 组合选择器
$('#div1,.c1,div').css({'height':'150px'});
</script>
层级
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.js"></script>
<script>
$(function () {
// 包含选择器
$('body div').css('color', 'red');//div1, div2 ,div3 ,div4
// 父子选择器
$('body>div').css('border', '1px solid blue');//div1,div3,div4
// 匹配所有紧接在 prev 元素后的 next 元素
$('#div1+div').css('height', '50px');//div3
// 匹配 prev 元素之后的所有 siblings(兄弟姐妹) 元素
$('#div1~div').css({'font-weight': 'bold', 'font-style': 'italic', 'color': 'green'});// div3,div4
</script>
</head>
<div id="div1">
</body>
</html>
筛选器
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.js"></script>
<style>
table {
width: 50vw;
/*// 相邻的线条合二为一*/
border-collapse: collapse;
border: 1px solid gray;
</style>
<script>
$(function () {
// 上下两种写法都可
$('tr:first').css('color', 'blue');
// $('tr').first().css('color', 'red');
$('tr:last').css('color', 'green');
// 匹配所有索引值为奇数的元素,从 0 开始计数
$('tr:odd').css('background-color', 'skyblue');
// 匹配所有索引值为偶数的元素,从 0 开始计数
$('tr:even').css('height', '40px');
// 匹配一个给定索引值的元素
$('td:eq(1)').css('background-color', 'orange');
// 匹配所有大于给定索引值的元素
$('td:gt(1)').css('background-color', 'pink');
// 后面会覆盖前面的数值
// $('td:lt(22)').css('background-color','yellow')
</script>
</head>
<table>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
ios 全屏 相册选取 ios相册照片全选
相信大家对单张图片的选择都比较熟悉,简单的UIImagePickerController就实现了但是,这里多张图片实现就相对比较麻烦,先简单的展示一下我们最终要实现的效果
AssetsLibrary和PhotoKit框架都可以用来封装相册的单选与多选功能,不过ALAssetLibrary的方法在iOS 9中不被推荐了,现在都是用新的框架PhotoKit
的来实现。发现好多之