Python day34_前端_JQuery库

作者: g_s_007 | 来源:发表于2018-06-11 22:21 被阅读0次

JQuery

jQuery是目前使用最广泛的javascript函数库，Query的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

JQuery 基本概念

1. 引入

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用

<script src="./js/jquery-1.12.4.min.js"></script>

2. jquery文档加载完再执行

使用方式：

<script type="text/javascript">

$(function(){

     //代码块

});

</script>

3. jquery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功

$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

4.对选择集进行过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素 下标是5

5.选择集转移

    var $div = $('#div1')//获取id 为div1的div
    $div.prev().css({'color':'red'}) //转移到上一个同级兄弟元素p，对p进行操作
    $div.prevAll().css({'color':'green'})//转移到div所有的同级兄弟元素，对所有的元素操作
    $div.next().css({'color':'pink'})//转移到div下一个同级兄弟元素h3,对h3进行操作
    $div.nextAll().css({'color':'#ddd'})//转移到div下面所有的同级兄弟元素，对所有元素操作
    $div.parent().css({'color':'red'}) //转移到div的父级元素对其操作
    $div.children().css({'color':'black'})//转移到div的子级元素span，对所有span进行操作
    $div.siblings().css({'color':'blue'}) //取反，转移到除了div的所有同级元素上，并对其操作
    $div.find('.spn02').css({'color':'gold'})//转移到div中类名为spn02的元素上，对其操作

6.判断是否选择到了元素

jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>

JQuery 样式操作

1. 操作行间样式

分为读取和写入操作

// 获取（读取）div的样式
$("div").css("width");
$("div").css("color");

//设置（修改写入）div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

注意！！

选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width

2. 操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

举个栗子：

    //css 部分
    <style>
        .big{
            font-size: 30px;
        }
        .red{
            color: red;
        }
        .noline{
            text-decoration: none;
        }
    </style>
    //JQuery部分
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#div1')
            var $div2 = $('div')
            var $a = $('#link01')
            //增加类名
            $div1.addClass('big')
            $div2.addClass('red')
            $a.addClass('big').addClass('red').addClass('noline')
            //删除类名
            $a.removeClass('big')

        })
    </script>
</head>
<body>
    <div id="div1">这是第一个div</div>
    <div id="div2">这是第二个div</div>
    <a href="#" id="link01">这是一个链接</a>
</body>

绑定click事件

使用方式：

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

如：

     $(this).css({'color':'red'})

获取元素的索引值 index()   这个索引值是元素在原来位置的索引值

            $p.click(function(){

                // 弹出点击到此时的索引值

                alert($(this).index())

            })

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数

使用：

    $btn.click(function(){
    //$box.animate({'width':1000});
    /*
    参数一：要做动画的样式属性，写成字典的形式
    参数二：动画持续的时间，默认是400毫秒，一般不写单位
    参数三：动画曲线 默认是 'swing'缓冲运动，还有'linear' 匀速运动
    参数四：回调函数，是一个匿名函数，动画结束后会自动调用这个匿名函数
    */
    $box.animate({'width':1000},1000,'swing',function(){
    //alert('动画完了！');
    $box.animate({'margin-top':400},1000,function(){
    $box.animate({'width':200,'margin-top':0},1000)
    });
    });
    })

JQuery 特殊效果

配合click 事件使用

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素 --经常使用

show() 显示元素 --经常使用

toggle() 切换元素的可见状态

slideDown() 向下展开

slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

JQuery 链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写。

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

同样练习层级菜单的练习题

JQuery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

扩展：prop()封装了val(),所以在取值的时候，可以直接使用，如：$div.val()

JQuery事件

事件函数列表：

blur() 元素失去焦点  
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单

表单验证

1、正则的意思：能让计算机读懂的字符串匹配规则

2、正则表达式的写法：

var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

3、规则中的字符

1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：

\d 匹配一个数字，即0-9

\D 匹配一个非数字，即除了0-9

\w 匹配一个单词字符（字母、数字、下划线）

\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]

\s 匹配一个空白符

\S 匹配一个非空白符

\b 匹配单词边界

\B 匹配非单词边界

. 匹配一个任意字符

//匹配纯数字字符串

var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

4、量词：对左边的匹配字符定义个数

? 出现零次或一次（最多出现一次）

+ 出现一次或多次（至少出现一次）
 
* 出现零次或多次（任意次）

{n} 出现n次

{n,m} 出现n到m次

{n,} 至少出现n次

5、任意一个或者范围

[abc123] : 匹配‘abc123’中的任意一个字符

[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾

^ 以紧挨的元素开头

$ 以紧挨的元素结尾

7、修饰参数：

g： global，全文搜索，默认搜索到第一个结果接停止

i： ingore case，忽略大小写，默认大小写敏感

8、常用函数
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

9、正则默认规则

匹配成功就结束，不会继续匹配，区分大小写

10、常用正则规则（重要！！）

//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;

//邮箱验证：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;

//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;

题目：注册表单验证 D:\python_就业班\04feiqiu传输资料\03_第三位老师\day07\4-代码\注册表单验证

事件冒泡

什么是事件冒泡：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的主要作用

用来做事件委托。

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件

阻止事件冒泡：

事件冒泡机制有时候是不需要的，需要阻止掉

全写是：event.stopPropagation()

也就是如果阻止这个事件冒泡，就在此事件上面写上 event.stopPropagation() ，这样就不会向上级冒泡

阻止默认行为：

阻止表单提交：

event.preventDefault();

合并操作：

return false

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作

举个栗子：

##script 部分
 <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $ul = $('#list')
             $ul.delegate('li','click',function() {
                 $(this).css({background:'red'})
            })
        })
    </script>
##body部分
<body>
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>

DOM操作

Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：

1、移动现有标签的位置

2、将新创建的标签插入到现有的标签中

具体操作：

    <script>
    $(function(){
        var $div = $('#div1');
        var $p01 = $('#p01');
        var $h01 = $('#h01');
        var $p02 = $('#p02');            
        // 当前元素里面的后面要放另外一个元素
        //$div.append($p01);
        // 当前元素要放到另外一个元素的里面的后面
        $p01.appendTo($div);
        // 当前元素里面的前面要放另外一个元素
        // $div.prepend($h01);
        // 当前元素要放到另外一个元素的里面的前面
        $h01.prependTo($div);
        // 当前元素外面的后面要放另外一个元素
        // $div.after($p02);          
        // 当前元素要放到另外一个元素的外面的后面
        $p02.insertAfter($div);
        // 新建一个空的div
        var $newdiv01 = $('<div>');
        var $newdiv02 = $('<div>这是新创建的第二div</div>');
        // 当前元素外面的前面要放另外一个元素
        $div.before($newdiv01);
        // 当前元素要放到另外一个元素的外面的前面
        $newdiv02.insertBefore($div);
        // 删除标签
        $newdiv01.remove();
    })  
</script>

//body 部分
<body>
<h1 id="h01">这是div1外面的h1标题</h1>
<p id="p01">这是在div1外面的p标签</p>
<p id="p02">这是div1外面的第二p标签</p>
<div id="div1">
    <h2>这是一个在div1里面的h2标题</h2>
    <p>这是在div1里面的段落</p>
</div>
</body>

javascript 对象

javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象

两种创建对象的方式：

方式一：

通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法

var person = new Object();

// 添加属性：
person.name = 'tom';
person.age = '25';

// 添加方法：
person.sayName = function(){
    alert(this.name);
}

// 调用属性和方法：
alert(person.age);
person.sayName();

方式二：

还可以通过对象直接量的方式创建对象经常用的是第二个

var person2 = {
    name:'Rose',
    age: 18,
    sayName:function(){
        alert('My name is' + this.name);
    }
}

// 调用属性和方法：
alert(person2.age);
person2.sayName();

json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式对象

json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象

与JavaScript对象写法不同的是，json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误

json格式一的数据：

{
    "name":"tom",
    "age":18
}

json格式二的数据:

["tom",18,"programmer"]

更复杂的数据结构：

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":'North Andover, MA'
    }
}

ajax

ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求

ajax需要在服务器环境下运行

$.ajax使用方法

常用参数：

1、url 请求地址

2、type 请求方式，默认是'GET'，常用的还有'POST'

3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'

4、data 设置发送给服务器的数据

5、success 设置请求成功后的回调函数

6、error 设置请求失败后的回调函数

7、async 设置是否异步，默认值是'true'，表示异步

写法一：

$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
    success:function(dat){
        alert(dat.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

写法二： 推荐

$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

ajax相关概念

1. 同步和异步

程序中的同步指的是：按照一定的顺序执行，先做完一件，再做另一件

程序中的异步指的是：同时做几件事情

2. 局部刷新和无刷新

ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新

3. 数据接口

数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等

Python day34_前端_JQuery库

JQuery

JQuery 基本概念

JQuery 样式操作

绑定click事件

jquery动画

JQuery 特殊效果

JQuery 链式调用

JQuery属性操作

JQuery事件

表单验证

事件冒泡

事件委托

DOM操作

javascript 对象

json

ajax

ajax相关概念

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

python的基础以及提高

我爱编程