JavaScript JQuery 实现AJXA & 选择器

最新推荐文章于 2022-11-12 16:57:25 发布

char0321

最新推荐文章于 2022-11-12 16:57:25 发布

阅读量153

点赞数

分类专栏： HTML/CSS/JavaScript

本文链接：https://blog.csdn.net/weixin_40683252/article/details/80830457

版权

HTML/CSS/JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用JQuery实现AJAX实例：

<html>
    <head>
        <title>title</title>
        <style type = "text/css">
            table {
                width: 200px;
                height: 200px;
                border-collapse: collapse;
            }
            
            table th {
                border: 2px solid #888;  
            }
            
            body {
                text-align: center;
            }
            
            th {
                font-family: 'helvetica';
                color: #666;
                font-weight: bold;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--AJAX格式-->
        <!--<table>
            <tr>
                <th>1-1</th>
                <th>1-2</th>
            </tr>
            <tr>
                <th>2-1</th>
                <th>2-2</th>
            </tr>
            <tr>
                <th>3-1</th>
                <th>3-2</th>
            </tr>
            <tr>
                <th>4-1</th>
                <th>4-2</th>
            </tr>
            
        </table>-->
        <div id="theD"></div>
        <button id="theB">get data</button>
        <script type="text/javascript" src="s51jquery.js"></script>
    </body>
</html>

js：

//AJAX in JQuery
$(document).ready(function(){ //类似onload
    $('#theB').click(function() { //类似css中为id定义style
        //配置request
        htmlobj = $.ajax({
            type: 'get',
            url: 's51jquery.json',
            async: true,
            dataType: 'json',
            success: function(data) {
                //$('theD').text(JSON.stringify(data));
                //console.log(data);
                console.log(jsonToHTML(data));
                $('#theD').append(jsonToHTML(data));
            }
        });
    });
});

function jsonToHTML(json) {
    //jquery写法
    var table = $('<table/>');
    $(json['LINE']).each(function() {
        var tr = $('<tr/>').appendTo(table);
        $(this['COLUMN']).each(function() {
            var th = $('<th/>').html(this['TEXT']).appendTo(tr);
        })
    });  
    return table;
}

JQuery选择器：

1）允许对HTML元素组或单个元素进行操作
2）基于id、类（class属性）、类型（tag）、属性（attr）、属性值等进行查找或者选择HTML元素
3）JQuery是基于已有的css选择器，除此之外，还自定义了选择器

4）所有的选择器都以$开头

选择器类型及使用方法均在注释内：

/*
//------------------------------JQuery选择器------------------------------//
1）允许对HTML元素组或单个元素进行操作
2）基于id、类（class属性）、类型（tag）、属性（attr）、属性值等进行查找或者选择HTML元素
3）JQuery是基于已有的css选择器，除此之外，还自定义了选择器
4）所有的选择器都以$开头
*/



//------------------------------基础选择器------------------------------//

//1）* 表示选择所有
//$('*').css('background-color', 'red');
//匹配所有，改变背景颜色
//---使用'*'

//2）选择标签，匹配所有标签
//$('div').css('background-color', 'red');
//选择所有div类，改变背景颜色
//---使用''

//3），表示或
//$('div, p').css('background-color', 'red');
//将div或p改变背景颜色
//---使用','

//4）匹配id
//$('#id1, #id2').css('background-color', 'red');
//将id1和id2的背景修改为红色
//---使用'#id'

//5) 匹配class
//$('.class1').css('background-color', 'red');
//$('.class1, .class2').css('background-color', 'red');
//与css一致，使用.调用对应class
//---使用'.class'



//------------------------------层次选择器------------------------------//

//1）直接或者间接后代选择
//$('div p').css('background-color', 'red');
//div为父元素，p为后代元素，筛选父元素为div的后代元素p（不一定直接是子元素）
//使用'空格'

//2）直接后代选择
//$('div>p').css('background-color', 'red');
//直接后代，即p需要为div的子元素，一定是父子关系
//---使用'>'

//3）邻接或者不邻接的后续选择
//$('p~p').css('background-color', 'red');
//同级别内，筛选前面有p元素的p元素（不一定邻接）
//---使用'～'

//4） 邻接的后续选择
//$('p+p').css('background-color', 'red');
//同级别内，选择前面邻接p元素的p元素（一定要邻接）
//---使用'+'



//------------------------------基本过滤选择器------------------------------//
//在条件中添加筛选条件
//---使用':'

//$('div:first').css('background-color', 'red');
//选择第一个div
 
//$('div:last').css('background-color', 'red');
//选择最后一个div

//$('div:not(.class1)').css('background-color', 'red');
//选择不是class1类的div

//$('div:not(.class1, .class2)').css('background-color', 'red');
//',' 在not内部
//---使用'not'

//$('div:even').css('background-color', 'red');
//$('div:odd').css('background-color', 'blue');
//选择奇偶，div奇为红，div偶为蓝

//$('div:eq(0)').css('background-color', 'red');
//$('div:gt(3)').css('background-color', 'red');
//$('div:lt(2)').css('background-color', 'red');
//选择第0（1）个div模块/大于/小于第0（1）个div模块
//---使用'eq(n)'/'gt(n)'/'lt(n)'

//$(':header').css('background-color', 'red');
//选择h1-h5
//使用':header'

/*
function animateDiv() {
    $('div:eq(0)').animate({width:'50%'}, 'slow');
    $('div:eq(0)').animate({width:'100%'}, 'slow', animateDiv);//第三个参数调用函数
}
animateDiv();
$(document).ready(function() {
   $('#theB').click(function(){
       $(':animated').css('background-color', 'yellow');
       //选择animated状态的模块
   }); 
});
*/

//$('div:nth-child(3n)').css('background-color', 'yellow');
//筛选div；且div需要是body下的第3n个子元素

//$('div:nth-of-type(3n)').css('background-color', 'yellow');
//筛选div；且是第3n个div（只看div模块）



//------------------------------可见性过滤选择器------------------------------//
//1) display:none 或者 input type=hidden 不可见，没有它的位置
//2）visibility:hidden 或者 opacity:0 不可见，但是占位置

//$(':hidden').css('display', 'block');
//筛选不可见
//$(':visible').css('background-color', 'red'); 
//筛选可见



//------------------------------内容过滤选择器------------------------------//
//1）包含文本字符
//$('div:contains(\'3\')').css('background-color', 'red'); 
//筛选包含'3'的div模块
//---使用'contains(\'str\')'，str为文本字符

//2）空的
//$('div:empty').text(123);
//筛选内容为空的div
//---使用'empty'

//3）包含某些子元素或者文本
//$('div:parent').css('background-color', 'red'); 
//筛选包含子元素或者不为空的div
//---使用'parent'

//4）包含子元素
//$('div:has(p)').css('background-color', 'red'); 
//筛选包含p子元素的div模块
//---使用'has(e)'，e为tag类



//------------------------------属性过滤选择器------------------------------//
//1）带有属性的
//$('div[myAttr]').css('background-color', 'red'); 
//筛选带有'myAttr'属性的div
//---使用'e[attr]'，e为tag，attr为属性

//2）带有属性，且符合属性值
//$('div[myAttr=\'a11\']').css('background-color', 'red'); 
//筛选带有'myAttr'属性的div，且属性值为'a11'
//---使用'e[attr=\'value\']'，e为tag，attr为属性, value为属性值

//3）不带有属性或者不符合属性值
//$('div[myAttr!=\'a11\']').css('background-color', 'red'); 
//---使用'!='

//4）带有属性，且不符合属性值
//$('div').filter('[myAttr]').filter('[myAttr!=\'a11\']').css('background-color', 'red');
//$('div[myAttr][myAttr!=\'a11\']').css('background-color', 'red');
//---使用'filter'来设置多个筛选条件
//---直接将多个条件放在一起，不间隔开

//5）属性值以xxx开头
//$('div[myAttr^=\'a\']').css('background-color', 'red'); 
//属性值以'a'开头
//---使用正则表达式'^='

//6）属性值以xxx结尾
//$('div[myAttr$=\'22\']').css('background-color', 'red'); 
//属性值以'22'开头
//---使用正则表达式'$='

//6）属性值包括xxx
//$('div[myAttr*=\'1\']').css('background-color', 'red'); 
//属性值包括'1'
//---使用正则表达式'*='



//------------------------------表单过滤选择器------------------------------//
//$(':input').css('display', 'none');
//---使用'input'

//$(':text').css('display', 'none');
//input中type为text

//$(':password').css('display', 'none');
//input中type为password
//$(':radio').css('display', 'none');
//$(':checkbox').css('display', 'none');
//$(':submit').css('display', 'none');
//$(':reset').css('display', 'none');
//$(':button').css('display', 'none'); // 对于input中type=button和button都有用
//$(':image').css('display', 'none');
//$(':file').css('display', 'none');
//$(':enabled').css('display', 'none'); // 筛选未被禁用的input
//$(':disabled').css('display', 'none'); // 筛选被禁用的input
//---使用':typevalue'，typevalue为type的值

/*
$(document).ready(function() { 
    $('button:contains(\'f1\')').click(function() {
        alert($(':selected').val()); //获取被选中的option的value
    });
    
    $('button:contains(\'f2\')').click(function() {
        alert($(':checked').val()); //获取被checked的表单的value
    });
});
*/

对应html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <div id="id1" style="background: green; height: 20px; width: 100%">div 1</div>
        <p id="id2">p 1</p>
        <div class="class1">
            div 2
            <p>p 2</p>
            <span></span>
            <p>p 3</p>
            <p>p 4</p>
        </div>
        <div class="class1">div 3</div>
        <div class="class1" myAttr="a11">div 4</div>
        <div class="class1" myAttr="a22">
            div 5
            <span>
                <p>p 5</p>
            </span>
            <span>
                <p>p 6</p>
            </span>
        </div>
        <div class="class2" myAttr="a33">div 6</div>
        <div class="class2">div 7</div>
        <div class="class2" style="height: 20px; background: yellow; display: none;">div 8</div>
        <h2>22222</h2>
        <h3>33333</h3>
        
        <form action="">
            <input type="text"/>
            <input type="password"/>
            <input type="radio" value="rad"/>
            <input type="checkbox" value="chk"/>
            <input type="submit"/>
            <input type="reset"/>
            <input type="button" value="xxx"/> <!--和button区别，input值在value中，button直接写-->
            <input type="image"/>
            <input type="file"/>
            <input type="text" disabled="disabled"/>
            <input type="hidden"/>
            <select name="" id="">
                <option value="111">beijing</option> <!--value为该选项的返回值-->
                <option value="222">tianjing</option>
                <option value="333">shenzhen</option>
            </select>
            <button>f1</button>
            <button>f2</button>
        </form>
        <button id='theB' type='button'>change it</button>
        <script src="s51.js"></script>
    </body>
</html>