第十六章：Python の Web开发基础(三) jQuery与Ajax

时间：2022-02-21 23:50:18

本課主題

  • jQuery 介绍
  • Ajax 介绍

jQuery 介绍

选择器

jQuery 的选择器分不同的种类，主要目的是用来查找目标的 HTML 标签，方便对目标标签进行操作，比如找到 <li></li> 的标签，然后新增或者修改里面的内容。jQuery 选择器分别有：针对标签的选择器、针对层级的选择器、针对特定目标的 ID选择器、针对整个类的 class选择器。

$('li')     // [<li></li>,<li></li>] 标签选择器,返回的是目标标签的一个集合

$('div p')  // <div><p></p></div> 层级选择器

$('#myBtn') // <input id="myBtn" /> ID选择器

$('.cls')   // <div class="cls"></div> class选择器 

表单选择器

$(":input");    //匹配所有 input, textarea, select 和 button 元素

$(":text");     //匹配所有的单行文本框

$(":password"); //匹配所有密码框

$(":radio");    //匹配所有单选按钮

$(":checkbox"); //匹配所有复选框

$(":submit");   //匹配所有提交按钮

$(":image");    //匹配所有图像域

$(":reset");    //匹配所有重置按钮

$(":button");   //匹配所有按钮

$(":file");     //匹配所有文件域

表单对象属性选择器

$("input:enabled");             //匹配所有可用元素 <input name="id" />

$("input:disabled");            //匹配所有不可用元素 <input name="email" disabled="disabled" />

$("input:checked");             //匹配所有选中的被选中元素(复选框、单选框等，select中的option)

$("select option:selected");    //匹配所有选中的option元素 

层级

$("li:first"); //获取匹配的第一个元素

$("input:not(:checked)")

$("li:odd"); //从 0 开始计数, 查找第1,3,5...行

$("li:even"); //从 0 开始计数, 查找第2,4,6...行

$("li:eq(1)"); //从 0 开始计数, 查找第2行

$("li:gt(0)"); //从 0 开始计数, 查找第2第3行，即索引值是1和2，也就是比0大

$("li:last"); //获取匹配的最后个元素

$("li:lt(2)"); //从 0 开始计数, 查找第1第2行，即索引值是0和1，也就是比2小

$(":header").css("background", "#EEE"); //匹配如 h1, h2, h3之类的标题元素, 给页面内所有标题加上背景色

$("div:contains('John')"); //查找所有包含 "John" 的 div 元素, 匹配包含给定文本的元素, 一个用以查找的字符串

$("td:empty"); //查找所有不包含子元素或者文本的空元素

$("div:has(p)").addClass("test"); //给所有包含 p 元素的 div 元素添加一个 text 类

$("tr:hidden"); //匹配所有不可见元素，或者type为hidden的元素

$("tr:visible"); //匹配所有的可见元素

$("ul li:first-child"); //在每个 ul 中查找第一个 li

$("ul li:last-child"); //在每个 ul 中查找最后一个 li

$("ul li:nth-child(2)"); //要匹配元素的序号，从1开始

效果

$("p").toggle("slow");              //用600毫秒的时间将段落缓慢的切换显示状态

$("p").hide("slow");                //用600毫秒的时间将段落缓慢的隐藏

$("p").show("slow");                //用缓慢的动画将隐藏的段落显示出来，历时600毫秒。

$("p").slideDown("slow");           //用600毫秒缓慢的将段落滑下

$("p").slideUp("slow");             //用600毫秒缓慢的将段落滑上

$("p").slideToggle("slow");         //用600毫秒缓慢的将段落滑上或滑下

$("p").fadeIn("slow");              //用600毫秒缓慢的将段落淡入

$("p").fadeOut("slow");             //用600毫秒缓慢的将段落淡出

$("p").fadeTo("slow", 0.66);        //用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

$("p").fadeToggle("slow","linear"); //用600毫秒缓慢的将段落淡入

查找 

$("div").children();    //查找DIV中的每个子元素

$("p").find("span");    //从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同

$("p").next();          //找到每个段落的后面紧邻的同辈元素

$("p").parent();        //查找每个段落的父元素

$("p").prev();          //找到每个段落紧邻的前一个同辈元素

$("div:last").prevAll().addClass("before"); //给最后一个之前的所有div加上一个类

$("div").siblings();    //找到每个div的所有同辈元素

事件

  1. .click：用 jQuery 把事件绑定到 <input /> tag 中 
    // html: <input id='btn' type="button" value="button"/>

$('#btn').click(function(event){
    
    console.log(event.target)
    
})

// results
    
//<input id='btn' type="button" value="button"/>

    $('#btn').click( )例子

  2. .on 
    // html: <input id='btn' type="button" value="button"/>

$("#btn").on('click',function(){
    
    console.log('Awesome!')
    
});

// results
    
//Awesome!

    $("#btn").on( )例子

  3. .hover(<move the cursor>,<move the cursor away>) 
    //<span id="s1">Awesome!</span>

$('#s1').hover(function(){
    
    $(this).text("MouseOver")
    
},function(){
    
    $(this).text("Awesome!")
    
})

// results
    
// MouseOver
    
// Awesome!

    $('#s1').hover( )例子

  4. .scroll - 当页面滚动条变化时，执行的函数: 
    $(window).scroll( function() { /* ...do something... */ } );

    $(window).scroll( )例子

  5. .attr - 获取字段的内容或者是对字段赋值 e.g. attr('href') 
    // html: <a id="a1" href="https://www.google.com.hk" target="_blank">Awesome!</a>

$('#a1').attr('href')
    
// results
    
// https://www.google.com.hk

$('#a1').attr('href','https://www.baidu.com')
    
// results
    
// <a id="a1" href="https://www.baidu.com" target="_blank">Awesome!</a>

    $('#a1').attr( )例子

  6. .change 
    $("input[type='text']").change( function() {
    
  // 这里可以写些验证代码
    
});

    $("div").change( )例子

  7. .html( )
  8. .remove( ) - completely remove the physical elements in the index.html page
  9. .empty( )
  10. .each( ) 
    <div>
    
    <ul>
    
        <li id='a'>apple</li>
    
        <li id='b'>banana</li>
    
        <li id='w'>waterlemon</li>
    
        <li id='l'>lemon</li>
    
        <li id='g'>grapes</li>
    
    </ul>
    
</div>

$('li').each(function(index){
    
    console.log(index + ':' +$(this).text())
    
})

// 0:apple
    
// 1:banana
    
// 2:waterlemon
    
// 3:lemon
    
// 4:grapes

    $('li').each( )例子

  11. .blur( ) 
    $("p").blur( function () {
    
    alert("Hello World!"); }
    
);

    $("p").blur( )例子

  12. .focus( ) - 当元素获得焦点时，触发 focus 事件 
    $("input[type=text]").focus(function(){
    
  this.blur();
    
});

    $("div").focus( )例子

  13. .submit( ) - 当提交表单时，会发生 submit 事件，该事件只适用于表单元素 
    $("form:first").submit();

    $("form:first").submit( )例子

  14. xxxxx

css

  1. css( )

Callback function

callback function define what would be happend after a particular event has been triggered.

  1. forEach( )
  2. setInterval('func( )',秒數); 
    <div id='banner' style="background-color: darkslategray; color: white;" >歡迎光臨大韓民國的領導</div>
    
<script>

    setInterval('f1()',1000);

    function f1(){
    
        var tag = document.getElementById('banner');
    
        var text = tag.innerText; //获取标签中间的文本內容
    
        var a = text.charAt(0);
    
        var sub = text.substring(1,text.length);
    
        var new_str = sub + a;
    
        tag.innerText = new_str; //设置标签中的文本内容
    
    }

</script>

    setInterval( ) 例子

  3. clearinterval( )

Traversing method

第十六章：Python の Web开发基础(三) jQuery与Ajax

<div id="one">

    <span>Awesome1</span>

    <span id='o2'>Awesome2</span>

    <span>Awesome3</span>

    <input id="btn" type="button" value="PressMe"/>

</div>

<div id="two">

    <span id='t1'>Awesome4</span>

    <span>Awesome5</span>

    <span>Awesome6</span>

    <input id="btn" type="button" value="PressMe"/>

</div>

<input id="btn" type="button" value="PressMe"/>

HTML Code

  1. $('#jquery-obj').find( ) - 查找 HTML 标签 
    $('#one').find('input').css('backgroundColor','pink')
  2. $('#jquery-obj').prev( ) - 找 jquery-obj 上一个标签 
    $('#o2').prev()[0] //<span>Awesome1</span>
  3. $('#jquery-obj').next( ) - 找 jquery-obj 下一个标签 
    $('#o2').next()[0] //<span>Awesome3</span>
  4. $('#jquery-obj').siblings( ) - 找 jquery-obj 除了自己以外的所有兄弟标签, e.g. 这个例子返回3个标签：[<span>Awesome1</span>,<span>Awesome3</span>, <input id="btn" type="button" value="PressMe"/>] 
    $('#o2').siblings()[0] //<span>Awesome1</span>
  5. $('#jquery-obj').children( ) - 找 jquery-obj 的所有孩子标签，e.g. 这个例子返回4个标签：[<span>Awesome1</span>,<span>Awesome2</span>,<span>Awesome3</span>, <input id="btn" type="button" value="PressMe"/>] 
    $('#one').children()[0] //<span>Awesome1</span>
  6. $('#jquery-obj').closest( ) - 找 jquery-obj
  7. $('#jquery-obj').map( ) - 找 jquery-obj

this 是什么

在 jQuery 中的 this 是代表 jQuery 自身的对象

function ShowMenu(ths){

    console.log(ths);

    $(ths).next().removeClass('hide');

    $(ths).parent().siblings().find(".body").addClass('hide');

}

jQuery 的扩展

  • 方法一：不需要先选选择器 
    $.extend({
    
    'func': function(arg){
    
        console.log('func: '+arg);
    
    }
    
});

$.func('123123'); //不需要先选选择器

    $.func('123123');

  • 方法二：扩展了jQuery选择器对象之后的方法，这需要先选选择器 
    $.fn.extend({
    
    'fn_func': function(arg){
    
        console.log('fn_func: '+arg);
    
    }
    
});
    
$('form').fn_func('123'); //需要先选选择器

    $('form').fn_func('123');

  • 方法三：自执行扩展 
    (function(jq){
    
    jq.extend({
    
        'func1': function(arg){
    
           console.log('func: '+arg);
    
        }
    
    });
    
    function f1(){
    
    }
    
})(jQuery);

//$.func1('123123');

    自执行扩展

  • xxxx

參考資料

银角大王：

金角大王：

其他：jQuery 中文文档 | jQuery API Doc

相关文章