Python全栈 Web(jQuery 一条龙服务)

  1. 云栖社区>
  2. 博客列表>
  3. 正文

Python全栈 Web(jQuery 一条龙服务)

巴黎香榭 2018-09-17 23:22:31 浏览36504 评论0

摘要: Python、Web、CSS、JS、jQuery、JavaScript、网络编程、H5、PHP、ajax

jQuery
1.jQuery介绍
jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式

核心理念:Write Less Do More

jQuery版本:
jQuery 2.x  不再支持IE6.7.8
jQuery 1.11.x
2.使用jQuery
1.引入jQuery文件
<script src="jquery-1.11.3.js"></script>
注意:jQuery文件的引入操作必须要放在其他jQuery操作之前
3.jQuery对象
1.什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的所有的操作都只针对jQuery对象,DOM对象不能用
2.工厂函数 - $()
作用:
1.能够获取 jquery对象
2.能够将DOM对象转换为 jquery 对象
语法:
$(选择器/DOM对象);
$()能够将选择器 和 DOM对象封装成jQuery对象进行返回
3.DOM对象 和 jQuery对象之间的转换
DOM对象:只能使用DOM提供的操作,不能使用jQuery操作
jQuery对象:只能使用jQuery操作,不能使用DOM操作
1.将DOM对象转换为jQuery对象
语法:
var 变量 = $(DOM对象);

注意:所有的jQuery对象在起名的时候,最好在变量名称前+$,用于区分与DOM对象的区别
2.将jQuery对象转换为DOM对象
1. var dom对象 = jQuery对象.get(0)
2. var dom对象 = jQuery对象[0]
4.jQuery选择器
1.作用
获取页面上的元素们,返回值都是由JQ对象所组成的数组.
语法: $("选择器");
2.选择器详解
1. 基础选择器
1. ID选择器
$('#id');
返回id属性值为指定id的元素对象
2. 类选择器
$(".className");
返回指定类名对象的元素
3. 标签选择器
$('element');
返回指定标签名对应的元素
4. 群组选择器
$('selector1,selector2,...');

2.层级选择器
1.$("selector1+selector2")
名称:相邻兄弟选择器
作用:匹配紧紧跟在selector1后面且满足selector2选择器的元素
2.$("selector1~selector2")
名称:通用兄弟选择器
作用:匹配selector1后面所有满足selector2选择器的元素
3.基本过滤选择器
1. :first
只匹配到第一个元素
2. :last
只匹配到最后一个元素
3. :not(selector)
将满足selector选择器的元素排除出去
4. :odd
匹配 偶数行 元素 (奇数下标)
5. :even
匹配 奇数行 元素 (偶数下标)
6. :eq(index)
匹配下标等于index的元素
7. :gt(index)
匹配下标大于index的元素
8. :lt(index)
匹配下标小于index的元素
4.属性选择器
1.[attribute]
作用:匹配包含指定属性的元素
ex: $("div[id]");
2.[attribute=value]
作用:匹配属性值为value的元素
ex: 
$("div[id=main]") -> $("#main");
$("[type=text]");
3.[attribute!=value]
作用:匹配属性值不是value的所有元素
4.[attribute^=value]
作用:匹配属性值以value字符作为开始的元素
5.[attribute$=value]
作用:匹配属性值以value字符作为结尾的元素
6.[attribute*=value]
作用:匹配属性值中包含value字符的元素
5.子元素过滤选择器
1.:first-child
匹配属于其父元素中的首个子元素
2.:last-child
匹配属于其父元素中的最后一个子元素
3.:nth-child(n)
匹配属于其父元素中的第n个子元素
:nth-child(1) --> :first-child



jQuery操作DOM
1.基本操作
1.html()
作用:获取 或 设置 jQuery对象的HTML内容
等同于 innerHTML
ex:
var $div = $("#main");
console.log($div.html());
$div.html("动态设置的文本");
2.text()
作用:纯文本内容
等同于 :innerText
3.val()
作用:获取 或 设置 表单控件的 value 值
等同于 : value 
2.属性操作
1.attr()
作用:读取 或 设置 jQuery对象的 属性值
ex:
1.$obj.attr("id");
获取 $obj 对象的id属性值
2.$obj.attr("id","container")
设置 $obj 对象的id属性值为 container
2.removeAttr("attrName")
作用:删除 jquery对象的 attrName 属性
ex:
$obj.removeAttr("class");
3.样式操作
1.attr("class","className")
使用 attr() 绑定className 值到jq对象的class属性上
2.addClass("className")
作用:追加className选择器到jq对象的class属性后
返回值:jq对象
<div id="obj"></div>
var $obj = $("#obj");
ex:
$obj = $obj.addClass("c1");
结果:<div id="obj" class="c1"></div>

$obj = $obj.addClass("c2");
结果:<div id="obj" class="c1 c2"></div>

以上两个操作,可以简化为:
(连缀调用)
$obj.addClass("c1").addClass("c2").html();
3.removeClass("className")
作用:将className属性值从 class 属性中移除
4.removeClass()
作用:清空class属性值
5.toggleClass("className")
切换样式:
元素如果具备className属性值,则删除
元素如果没有className属性值,则添加
6.css("css属性名")
作用:获取对应css属性的值
ex:
$obj.css("id")
作用:获取$obj对象的id属性值
7.css("css属性名","css属性值")
作用:为元素设置css属性值
8.css(JSON对象)
JSON对象 类似于 PYTHON中字典的写法
ex:
$obj.css({
"color":"red",
"background-color":"orange"
}
);
4.遍历节点
1.children() / children(selector)
作用:获取jq对象的所有子元素或带有指定选择器的子元素
注意:只考虑子代元素,不考虑后代元素
2.next() / next(selector)
作用:获取jq对象的下一个兄弟元素/满足selector的下一个兄弟元素
3.prev() / prev(selector)
作用:获取jq对象的上一个兄弟元素/满足selector的上一个兄弟元素
4.siblings() / siblings(selector)
作用:获取jq对象的所有兄弟节点 / 满足selector的所有兄弟
5.find(selector)
作用:获取满足selector选择器的所有后代元素
6.parent()
作用:查找jq对象的父元素
    5.创建元素 & 插入元素
    1.创建元素
    语法:var $obj = $("创建的内容");
    注意:创建的内容必须是标记
    ex:
    1.创建一对div
    var $div = $("<div id='xxx'>xxxxx</div>");
    2.创建一对button
    var $btn = $("<button></button>");
    $btn.attr("id","btnDelete");
    $btn.html("删除");
    2.插入元素
    1.内部插入
    1.$obj.append($new);
    将$new元素插入到$obj中最后一个子元素位置处
    2.$obj.prepend($new);
    将$new元素插入到$obj中第一个子元素的位置处
    2.外部插入
    作为兄弟元素插入到网页中
    1.$obj.after($new);
    将$new作为$obj的下一个兄弟节点插入到网页中
    2.$obj.before($new);
    将$new作为$obj的上一个兄弟节点插入到网页中


 document.createElement("div");
 $("div")
 $("<div></div>");
2.jQuery中的事件处理
1.DOM加载完成后的操作
1. $(document).ready(function(){
//DOM树加载完毕后要执行的操作
//相当于是页面初始化
   });
2. $().ready(function(){
  //效果同上
   });
3. $( function(){
//效果同上
   } );
    2.jQuery事件绑定
    1.方式1
    $obj.bind("事件名称",事件处理函数);
    ex:
    $obj.bind("click",function(){

    });
    2.
    $obj.事件名称(function(){

    });

    ex:
    $obj.click(function(){
    xxxxx
    });
    常用事件
    $obj.click(fn);
    $obj.mouseover(fn);
    $obj.mousemove(fn);
    $obj.mouseout(fn);
    $obj.keydown(fn);
    $obj.keypress(fn);
    $obj.keyup(fn);
    $obj.focus(fn);
    $obj.blur(fn);
    $obj.change(fn);
    $obj.submit(fn);
    3.事件中的this
    在jquery事件中,this表示的就是触发当前事件的DOM对象
    4.事件对象 - event
    在绑定事件的时候,允许传递 event 参数来表示事件对象
    1.$obj.bind("事件名称",function(event){
    event 表示的就是事件对象
      });
    2.$obj.事件名称(function(event){
    event 表示的就是事件对象
      });
      event的使用方式 与 原生JS事件中的事件对象一致
      1.事件源
      event.target
      2.鼠标事件
      event.offsetX : 在元素上的横坐标
      event.offsetY : 在元素上的纵坐标
      3.键盘事件
      event.which : 键位码或ASCII码
    5.激发事件操作
    $obj.事件名称();
    ex:
    $obj.click(); //触发$obj的click事件
    $obj.click(function(){}); //为$obj绑定click事件
3.jQuery删除节点
1.remove()
语法:$obj.remove();
作用:删除$obj元素 
2.remove("selector")
语法:$obj.remove("selector");
作用:将满足selector选择器的元素删除
3.empty()
语法:$obj.empty();
作用:清空 $obj 内容
4.jQuery 遍历操作
方法:each()
1.循环遍历 jQuery 数组
$obj.each(function(i,obj){
i : 循环出来的元素的下标
obj : 循环出来的元素(DOM元素)
});
2.循环遍历 JS数组(原生)
1.将原生数组通过$()转换成jQuery数组
2.
$.each(原生数组,function(i,obj){
i : 遍历出来的下标
obj : 遍历出来的元素
});

【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击

网友评论

巴黎香榭
文章102篇 | 关注113
关注
定制建站一条龙服务,由客户经理与设计师提供一对一服务,帮助用户轻松建立企业官网 查看详情
基于云安全大数据能力实现,通过防御SQL注入、XSS跨站脚本、常见Web服务器插件漏洞、木马... 查看详情
由轻量级Agent和云端组成,集云盾威胁情报于一体,通过Agent和云端大数据的联动,为您提... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
双12

双12