六、jQuery基础

jQuery:集合Dom/BOM/Js的类库

参考文献：http://jquery.cuishifeng.cn/index.html

参考博客：https://www.cnblogs.com/wupeiqi/articles/5369773.html
导入:相当于放在编辑的文档文件中：官网下载的是js文件，有两个文件，本地测试可以用正常版本，正常上线的时候用压缩版的，例如：jquery-1.12.4.js，推荐使用1系列的最新版本，兼容性比较好,2和3版本会忽略低版本的浏览器。

我们在使用jquery的时候，也是要先把jquery的css文件放入工程里面，但是不用link导入，而是在编写JavaScript脚本的时候再导入,如下：

导入方法：
　　<script src='jquery-1.12.4.js'></script>
　　<script>
　　　　jQuery.（也可以写成$('#i1'),一般都是用$这个方法）
　　</script>

jquery和Dom之间的转换：
　　$('#id')[0] 就可以转换成Dom对象document.getElementById('i1')
　　d=document.getElementById('i1'), $(d)就可以将Dom对象转换成jquery对象;

tips：

在使用别人的样式时，如果你想要编辑或者添加一个小图标(https://fontawesome.com/icons?from=io),只需要在这个网站下载他们的样式打包文件下来，解压到自己的工程项目里面，在<title>标签下面用<link>标签引入他们的css文件，然后再找到你想要的小图标的标签源码复制到你的html文件想要黏贴的位置即可，这种方法可以减少代码编写量，但是修改就比较麻烦，如果要将自己想要渲染的样式覆盖掉他们的样式，就必须在自己定义的style中添加的样式后面加上!important，示例：

<link rel="stylesheet" href="/static/bootstrap.ss">
<style>
    .c1{
        !important;
    }
</style>

这样，自己渲染的c1类的背景颜色就编程了红色，覆盖了引入的css样式里面定义好的背景颜色了。

一、查找元素:选择器，直接找到某个或者某类标签
1.id
　　$('#id')
2.class
　　<div class='c1'></div>
　　$('.c1')
3.标签
　　<a>...</a>
　　$('a')
4.选择多个标签（组合选择）
　　$('a,c1,#id')
5.层级选择,和方法4不同的是，查找的元素之间用空格隔开；
　　$('a c1 #id') 子子孙孙
　　$('a>child')，$('a+child')，$('a~child') 只找儿子
6.基本和属性的选择参考相关网站

实例：
　　jquery循环：$('...').each(function(){})，例如反选实例，全选或者多选不需要后面的each，jquery默认是会自动循环的 注意function里面要有this，代表当前循环的每一个元素，这里的this是Dom对象
$(this).prop('key','value') jquery获取和设置属性方法，prop方法是专门针对checked和selected的
三元运算：var v=条件 ？真值：假值

筛选：在选择器选择到的所有元素中再次进行选择，例如：
　　$(this).next() 紧挨着的下一个标签
　　$(this).prev() 紧挨着的上一个标签
　　$(this).parent() 获取父标签
　　$(this).children() 获取所有的孩子标签
　　$(this).siblings() 获取除了自身的所有兄弟标签
　　$(this).find('.c1/#id') 通过find找到.c1/$id的标签

添加样式：$('').addClass()
删除样式 $('').removeClass()
　　js还支持链式编程，就是说可以将多个操作都通过jquery的.写成一条语句

其他jquery的功能请参考网站：http://jquery.cuishifeng.cn/

文本操作：(这些知识点可以练习模态框)
　　$(...).text() 获取文本内容
　　$(...).text('xxx') 设置文本内容，如果内含标签，不会解析，直接作为字符串
　　$(...).html() 获取内含标签的内容
　　$(...).html('xxx') 设置值
　　$(...).val() 相当于Dom中的value，获取值
　　$(...).val(‘’) 相当于Dom中的value，设置值

样式操作：
　　$(.c1).removeClass('hide')
　　$(.c1).addClass('hide')
开关操作：$(.c1).toggleClass('hide'),实现显示或者消失
属性操作
　　$('').attr（） 专门用来做自定义属性，可以获取和修改属性
　　$('').removeAttr（） 专门用来做自定义属性，可以删除属性
　　$('').prop（） 专门用于chekbox,radio进行的操作
　　$('').index() 获取索引值

TAB切换菜单：
文档处理：

　　$('').append() 子标签最后添加一个标签
　　$('').prepend() 字标签最前面添加一个标签
　　$('').after() 标签下面添加一个平级标签
　　$('').before() 标签上面添加一个平级标签
　　$('').eq(index).remove() 删除一个标签
　　$('').eq(index).empty() 清空一个标签的内容
　　$('').eq(index).clone() 复制一个标签

css某一条样式的修改：
　　$('').css('样式名称','样式值')
点赞功能实现：
　　-$('').append()
　　-setInterval定时器
　　-透明度
　　-opsition
　　-大小，位置

位置操作：(可以实现移动窗口位置的功能)
　　-$('').remove()
　　-$(window).scrollTop() 获取右侧滑轮位置，
　　-$(window).scrollTop(100) 设置右侧滑轮到100，
　　-$('').offset() 获取指定标签在html中的坐标
　　-$('').offset().left() 获取指定标签在html中离左边距离
　　-$('').offset().right() 获取指定标签在html中离右边距离
其他操作参考上面网站。

事件：Dom：三种绑定
jquery：
　　$('.c1').click()
　　$('.c1').bind('click'.function(){})
　　$('.c1').unbind('click'.function(){})
　　比较特殊的方式：$('.c1').delegate('a','click'.function(){}) 根据标签绑定，这种叫委托，当代码执行的时候其实没有绑定事件，当进行点击了时候才绑定执行事件
　　$('.c1').undelegate('a','click'.function(){})
上面几种绑定都是下面的on绑定方法的扩展
　　$('.c1').on('click',function(){})
　　$('.c1').off('click',function(){})

阻止事件发生：

　　这些绑定的事件都是后来绑定的，执行先后顺序为，后来绑定的优先于标签默认自带的先执行，如a标签，当添加的事件加上return false时，后面的事件不会执行，如果是ruturn true 就会执行后面的；注意，通过Dom绑定事件，标签中的事件绑定要加上return（onclick='return Foo()'），用jquery绑定的在函数里面添加return函数就行;（表单提交验证的时候可以用这个功能）

　　默认事件先执行标签：Checkbox标签；

　　自定义事件先执行：a,submit...标签；

 　　登陆注册框实现代码实例：

　　当页面框架加载完成之后自动执行：代码是由上至下执行的，一般图片太大的时候会有延迟，图片框架有了，但是内容还没有显示，所以将script代码放在这个函数体内可以优先执行，不用等图片全部加载完成
$(function(){})

扩展:里面是字典形式的
　　第一种：

　　$.extend({
　　　　'扩展名1':function(){...},
　　　　'扩展名2':function()(...),
　　　　'扩展名3':function()(...),
　　　　})
　　var v=$.扩展名();
　　alert(v);

第二种：

　　$.fn.extend({
　　　　'扩展名1':function(){...},
　　　　'扩展名2':function()(...),
　　　　'扩展名3':function()(...),
　　　　　　})
　　　　var v=$(‘选择器’).扩展名();
　　　　alert(v);
　　以后可以引入网上其他人写的扩展方法，写在一个文件里，但是要像引入jquery一样引入这个文件，当映入的两个扩展名字相同，而且又都有全局变量的时候，这个时候就可以在扩展文件里面用自执行函数，也可以带参数例如：带上参数(jQuery),这样扩展文件里面的就都是局部变量了

正则：
　　js中创建正则表达式对象：/匹配符/
　　test 判断字符串是否符合规定的正则
　　rep=/d+/;
　　rep.test('asdfgsgsg34g')
　　返回true
　　rep=/^d+$/ 这种匹配就是开头结束都是数字才返回ture
　　exec 获取/提取匹配的数据
　　rep=/d+/;
　　rep.exec('asd45sgsg34g')
　　返回的只有[‘45’],是一个列表，而且只有一个，
验证过程：
　　1、前端：验证

　　2、后端：python验证实现

　　3、业务处理