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 的来实现。发现好多之