06-jQuery基础[Python]

一、jQuery简介

• jQuery概述
  为了简化JavaScript的开发，一些JavaScript程序库诞生了。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的页面，并且兼容各大浏览器。
  jQuery是什么:是一个javascript程序库。
  JS是语言，jQuery是建立在这个语言上的一个基本库(框架)，利用jQuery可以更简单的使用JS。

• jQuery的优势

  • 轻量级，使用灵巧(只需引入一个js文件)
  • 强大的选择器(模仿CSS选择器更精确、灵活)
  • 出色的DOM操作的封装(动态更改页面样式/页面内容,添加、移除等)
  • 可靠的事件处理机制(动态添加响应事件)
  • 提供基本网页特效(提供已封装的网页特效方法)
  • 完善的Ajax
  • 易扩展、插件丰富

• jQuery文件

官方文档: http://jquery.com/
中文文档: https://www.jquery123.com/

jquery.js(开发版):完整无压缩版本，主要用于测试、学习和开发
jquery.min.js(生产版):经过工具压缩, 主要应用于产品和项目
jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要 在相关的HTML文档中引入该库文件的位置即可。


备注(开源库CDN加速):  
  百度 http://cdn.code.baidu.com/
  七牛云 https://www.staticfile.org/
  又拍云 https://www.bootcdn.cn/

HBuilder代码提示中都有jQuery的导入，使用的是百度CDN加速。

二、jQuery基本使用

• 在jQuery库中，$是jQuery的别名，$()等效于就jQuery()

• window.onload

  window.onload = function(){ ... }
  简写: $(function(){ ... })

• javascript基本操作

  var domObj = document.getElementById('box'); //获得dom对象
  var objHtml = domObj.innerHTML; //使用js中的属性innerHTML

• jQuery基本操作

  // 获取对应元素的innerHTML
  $('#box').html()  

// 设置对应元素的innerHTML
  $('#box').html('hello')  

• jQuery对象
  jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法

  // 通过jQuery方法获取的就是jQuery对象；
  var $box = $('#box')

建议: 获取jQuery对象变量命名，以'$'为前缀，这也是为了方便辨别jQuery对象。

• DOM对象转成jQuery对象
  对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象

  var foo = document.getElementById('foo')
  var $foo = $(foo)

• jQuery对象转成DOM对象
  jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。

// 方式一: jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $foo = $('#foo'); 
var foo = $foo[0];

// 方式二: jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
var $foo = $('#foo'); 
var foo = $foo.get(0);

三、jQuery选择器

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器, jQuery的行为规则 都必须在获取到元素后才能生效。

• jQuery选择器的分类

- 基本选择器 
- 层级选择器 
- 常用伪类选择器: 可以看作是一种特殊的类选择符

• 基本选择器
  包括ID选择器，标签选择器，类选择器，通配选择器和组选择器5种。

a. ID选择器: $("#id") 根据给定的ID匹配一个元素。
b. 标签选择器:$("element") 根据给定的元素名匹配所有元素
c. 类选择器:$(".className") 根据给定的类匹配元素。
d. 通配选择器:$("*") 匹配指定上下文中所有元素
e. 组选择器:$("selector1,selector2,selectorN") 特点:无数量限制，以逗号分隔 (逐个匹配，并将匹配到的元素合并到一个结果内返回)

• 层级选择器
  包含后代选择器、子选择器、相邻选择器、兄弟选择器4种。

a.包含选择器:$("a b") 在给定的祖先元素下匹配所有后代元素。 (不受层级限制) 
b.子选择器:$("parent > child") 在给定的父元素下匹配所有子元素
c.相邻选择器:$(“prev + next”) 匹配所有紧接在prev元素后的next元素。等同于next()方法 
d.兄弟选择器:$(“prev ~ siblings”) 匹配prev元素之后的所有所有兄弟元素。等同于nextAll()方法

.next()取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 [.prev()上一个元素]
.nextAll()获得每个匹配元素集合中所有下面的同辈元素。 [.prevAll()所有前面同辈元素]
.find() 查找子元素 $('#box').find("h2")

• 伪类选择器

- :first 匹配找到的第1个元素
- :last  匹配找到的最后一个元素
- :eq(index) 匹配一个给定索引值的元素
  $('.text:eq(1)').html('下标为1的元素')
  $('.text').eq(1).html('下标为1的元素')
- :even 匹配所有索引值为偶数的元素 【注意：标签从0开始编号的】
- :odd 匹配所有索引值为奇数的元素
- :gt(index) 匹配所有大于给定索引值的元素
- :lt(index) 匹配所有小于给定索引值的元素
- :not() 去除所有与给定选择器匹配的元素
  $('p:not(.text)').html('没有.text')

案例: 对应练习1和练习2

五、DOM属性操作

• 添加类名

语法: 
  // 为每个匹配的元素添加指定的样式类名
  .addClass( className )
例如: 
  $("p").addClass("active");
  $("p").addClass("myClass yourClass");

• 删除类名

语法: 
  // 移除集合中每个匹配元素上一个，多个或全部样式
 .removeClass( [className ] ) 

例如: 
  $('p').removeClass('active')
  $('p').removeClass('myClass yourClass')

• 获取属性

语法: 
  // 获取匹配的元素集合中的第一个元素的属性的值
  .attr( attributeName )

例如: 
  var title = $("em").attr("title");

备注: 获取输入框中的值 $('.username').attr('value') 或 $('.username').val()

• 设置属性

语法: 
  // 设置每一个匹配元素的一个或多个属性
  .attr( attributeName, value )

例如: 
  $('.img').attr('src', 'head.png');
  $('input').attr('name', 'test').attr('value', '哈哈')
  $('input').attr({'name':'test', 'value':'啦啦'})

• 移除属性

语法: 
  // 为匹配的元素集合中的每个元素中移除一个属性
  .removeAttr( attributeName )

例如: 
  input.removeAttr("title")

六、DOM操作

• class属性

- .addClass( className ) 添加css类选择器的类名
- .removeClass( [className ] ) 删除
- .toggleClass( className ) 如果存在就删除，如果不存在就添加

• css属性

- .css( name ) 返回匹配到的第一个元素的样式属性值
  $("div").css("color");
- .css( name,value ) 为所有匹配到的设置属性和值
  $("div").css("color","blue");
  $("div").css("margin-bottom", 30) 
  $("div,p").css("margin-bottom",'30px') 
- .css( {键:值, ...} ) 设置多个属性和值
  $("div").css({"width":"100px","color":"yellow"});

• 创建节点

- 创建元素节点
  $(标签)
  var $obj = $("<p></p>")

- 创建文本节点
  var $obj = $("<p>hello</p>")

- 创建属性节点
   var $obj = $("<p title='good'>hello</p>");

• 插入节点

- .append( content  [, content ] ) 在每个匹配元素里面的末尾处插入参数内容
  $("div").append($obj);  // 在div中追加 $obj

- .appendTo(target) 将匹配的元素插入到目标元素的最后面
  $('<p>Test</p>').appendTo('.inner')  // 将p元素插入到.inner后面

- .prepend( content [, content ] )  将参数内容插入到每个匹配元素的前面
  $('.inner').prepend('<p>Test</p>');  // 在.inner前面插入p元素

- .prependTo( target ) 将所有元素插入到目标前面
  $('<p>Test</p>').prependTo('.inner')  // 将p元素插入到.inner前面

• 删除节点

- .remove( [selector ] ) 匹配到的元素直接删除
  // 返回值为被删除节点的引用，还可以继续使用【当做一个标签对象使用】
  var $obj = $("div p:eq(1)").remove();

- .empty() 从DOM中移除集合中匹配元素的所有子节点
  $("div p:eq(1)").empty();

• 复制节点

- .clone() 复制节点
   var $view= $(".view").clone();   

• 替换节点

- .replaceWith( newContent )  用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
  $("#div1").replaceWith("<div>替换文本</div>");

七、事件处理

• bind() 为一个元素绑定一个事件处理程序

语法:
  标签对象.bind(type,[data],fn)
    type；事件的类型
    data:可选参数，作为event.data属性值进行传递，一般不用
    fn:当事件发生的时候的响应函数

例如:
  $("#button").bind("click",function(){
    alert(1)
  })

问题：
  1.举例：div中有50个p标签，像上面的绑定方式，
    则会隐式的绑定50次事件，对于大量元素而言，影响性能
  2.对于尚未存在的元素，无法绑定，则当事件点击的时候，没有任何响应

• 直接使用事件名称绑定

语法:
  标签对象.事件名称(fn)
  fn:当事件发生的时候的响应函数

例如:
  $("button").click(function(){
    alert(1)
  })

• on() 在选定的元素上绑定一个或多个事件处理函数

语法:
  代理.on(事件类型, 委托,响应函数)
    代理：父元素的对象
    委托：子元素的标签名称

事件委托：
  事件代理，利用事件冒泡的原理给父元素添加响应事件，从而可以处理子元素的事件

工作原理：
  不是直接给p标签绑定事件，而是给父标签div绑定了事件，
  当点击div中任意的p标签时，都会响应事件【冒泡过程】
  新添加的p标签也会有同样的响应事件，而整个过程中，事件只被绑定了一次

例如:
  $("div").on("click",function(){
    alert(1);
  })    

  $("div").on("click","p",function(){
    alert(1);
  })    

• off() 解除事件

语法:
  标签对象.off( [type] )
    type: 为空，即移除所有事件
    type: 不为空，即是移出对应事件(一个或多个)

例如:
  $("#box").off() // 移除所有事件
  $("#box").off("mouseenter") // 移除一个事件
  $("#box").off("mouseenter mouseleave") // 移除多个事件

• 事件对象

// event对象
$("#btn").bind("click",function(event){
  // 获取event对象
  console.log(event);
                    
  // 获取event对象的类型
  console.log(event.type);
                    
  // 获取event事件触发的元素
  console.log(event.target);
                    
  // 获取光标相对于页面的x坐标和y坐标
  console.log(event.pageX,event.pageY);

  // 阻止事件冒泡
  event.stopPropagation();
})

八、特效

• show显示、hide隐藏、toggle切换状态

- .show(动画持续的时间，回调函数) 显示匹配的元素
  单位为毫秒,回调函数【callback】：当动画执行完成之后需要的操作
  $("#div").show()
  $("#div"). show(200,function(){
    alert("显示出来了");
  })

- .hide(动画持续的时间，回调函数)
  $("#div").hide()
  $("#div").hide(2000, function(){
    alert("隐藏完了");
  })

- .toggle( [动画持续时间 ] [,回调函数 ] ) 
  // 如果元素是可见的，则隐藏，如果元素是隐藏的，则设置可见
  $("#id").toggle(1000,function(){
    alert("切换完成");
  })

• slideDown滑动显示、slideUp滑动隐藏、slideToggle切换状态

- .slideDown( [动画持续时间 ] [,回调函数 ] ) 
 用滑动动画显示一个匹配元素
  $("#id").slideDown(2000,function(){
    alert("over");
  })

- .slideUp( [动画持续时间 ] [,回调函数 ] ) 
  用滑动动画隐藏一个匹配元素
  $("#id").slideUp(2000,function(){
    alert("over");
  })

- .slideToggle( [动画持续时间 ] [,回调函数 ] ) 
  用滑动动画显示或隐藏一个匹配元素
  $("#id").slideToggle(2000,function(){
    alert("over");
  })

• animate自定义动画
  根据一组 CSS 属性，执行自定义动画。

语法:
  .animate( properties [, duration ] [, easing ] [, complete ] )
   properties:  CSS属性和值的对象
   duration: 动画时长
   easing: 过渡使用哪种缓动函数(linear/swing)
   complete: 在动画完成时执行的函数

例如:
  $("button").on("click",function(){
      //animate()
        $("div").animate({left:'250px'});
  })

$("button").bind("click",function(){
  // 同时设置多个属性 
  $("div").animate({  【同时操作】
    left:'250px',
    height:'150px',
    width:'150px',
    opacity:'0.5'
    },3000,function(){
      alert("over");
    });

  // 链式运动，即操作完一个，才会执行下一个
  // $('#box').animate({left:'200px'}, 1000).animate({top:'200px'}) // 链式运动
  })

九、this对象和index方法

// index(): 默认按照兄弟节点排序
$(this).index() 

// 参数: 按照指定的参数选择器排序
$(this).index('li')

如果不需要使用jQuery提供的方法，就直接使用原生JS中的this对象!!!

十、练习

• 练习1

<h4 id="title"> 论语 </h4>
<div id="divDemo">子在川上曰:
  <p class="pDemo">“逝者如斯夫!</p> 
  <p class="pDemo">不舍昼夜。”</p>
  <p class="pDemo1">“逝者如斯夫!</p> 
  <p class="pDemo2">不舍昼夜。”</p>
</div>

1, 通过基本选择器获取并打印这首诗的标题
2, 将class为pDemo1的p元素的背景颜色设置为黄色
3, 将class为pDemo2的p元素的字体颜色设置为红色
4, 将class为pDemo的第一个p元素的字体大小设置为25px, 将所有文字的字体设置为”微软雅黑”

• 练习2

        <h1>沁园春·雪</h1>
        <h2>毛泽东</h2>
        <div style="border: 3px solid red;">
            <span>
                <div style="border: 1px solid red">北国风光，千里冰封，万里雪飘。
                    <div style="border: 5px solid red">望长城内外，惟余莽莽；大河上下，顿失滔滔。</div>
                    <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
                    <p>须晴日，看红装素裹，分外妖娆。</p>
                </div>
                <h4>aaaaaaaaaaaaaa</h4>
            </span>
            <p id="mp">江山如此多娇，引无数英雄竞折腰。</p>
        </div>
        <p class="c1">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
        <p class="c1">一代天骄，成吉思汗，只识弯弓射大雕。</p>
        <p>俱往矣，数风流人物，还看今朝。</p>

1. 让id为mp的元素文字大小变成30px
2. 让class名为.c1的元素背景为#CCFF99
3. 将所有的div和p，统一显示margin-bottom:30px
4. 将所有的div的border为 2像素, 且为 实线,蓝色
5. 将div下的子div的文字变蓝色blue
6. 将div中包含的所有div背景颜色变成#FF99FF
7. 将div的所有兄弟标签p的字体颜色变成黄色
8. 将紧跟着div的p标签的边框设为2像素 实线 #009900

• 练习3
  点击表格中的三张图片, 切换下面的图

  
  练习4

• 练习4
  简易年历, 如图, 可以点击对应的月份, 改变下面的文字内容

  
  练习5

• 练习5
  动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加一条记录, 点击删除则会删除对应行 的记录

  
  练习6

  ()