pjQuery2
jQuery的内容：找对象、改样式、改属性、注册事件、改动画、动态创建节点
如何在pycharm中给HTML设置模版：
settings---editor----Live Templates------...
jq不能用在移动开发。
jq属于链式编程，一般返回的都是对象，但有些返回的是字符串，如val(),获取的时候也是字符串。
jQuery使用步骤：
1、引入jQuery文件 ，引用错了，鼠标放上去会有错误的提示。
<script src="jquery-3.1.1.js" ></script>
如果一个文件夹里面导入外面的可以<script src="。。jquery-3.1.1.js" ></script>
2.第二部入口函数：document是文档的意思。意思是文档加载完再执行里面代码。
第一种写法 <script > $(document).ready(function(){}) </script> 第二种写法： <script > $（function(){}） </script> js的入口函数是 window.onload=fuction(){}
js的入口函数要比jq的晚，
jq会等页面加载完成就执行，但不会等图片加载；而js两个都要等。
版本问题：
从2.0以后就不兼容ie6、7、8，从3.0以后就不兼容ie. 想要兼容旧版本就要用1.12，国内都用。 压缩版和不压缩一样使用，压缩的会去掉注释和空格，；适用在哪个环境？ 开发环境、测试环境（在服务器上,测bug）、生产环境（服务器上，客户使用的，不能有bug)。 压缩版用在生产环节。开发环境不用压缩版。
Dom(js)对象与jq对象：
1、什么是Dom对象：
使用js的方式获取到的元素就是js对象，也是Dom对象；
2、什么是jq对象：
使用jq方式获取的元素就是jq对象。方法前面都带$
为了区分两种我们最好写的时候将jq对象定义变量的时候前面加$，让代码增加可读性。
jq对象其实就是js对象的一个集合，伪数组，里面存放一堆的js对象；
3、之间的联系;
js 对象不能调用jq的方法；如果要使用就需要转换；
jq对象也不能调用js的方法；因为jq对象里面包含了js的对象，所以jq对象的成员可以调用js的方法。
4、js对象怎么转换为jq对象？
var cloth=document。getElementById('cloth');
//Dom对象转换为jq对象
$(cloth).text('');
jq对象怎么转换为js对象？
jq对象是一个伪数组，直接取里面的元素就是js对象，就可以使用js方法。
cloth[1].style.backgroundColor='red';# $符号看定义的时候是否有带，不是必须。
还有一种方法就是$(cloth)。get(1)
$其实是一个函数，后面要带括号，参数不同功能就不同；一般有三种用法：
第一种： $（function(){}）;
第一种： $（dom对象）; //括号里面没引号
第三种： 参数是一个字符串，用来找对象 $(‘div’) 或$('#but')或$（‘。current’） //括号有引号 里面是标签
$其实就是jQuery的简写。
jq 选择器：用来找对象的。
兼容所有css选择器；还有其他很所使用的时候查找。
1.4.2 基本选择器
名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); 获取同一类标签的所有元素 并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素 交集选择器（标签指定式选择器） $(“div.redClass”); 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。 总结：跟css的选择器用法一模一样。
1.4.3 层级选择器
名称 用法 描述 子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 跟CSS的选择器一模一样。
1.4.4 过滤选择器
这类选择器都带冒号： 用法 描述 :eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 :odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素 :even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素 【案例：隔行变色】
1.4.5 筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。 用法 说明 children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”)，子类选择器 find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括自己本身。 parent() $(“#first”).parent(); 查找父亲 eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始 next() $(“li”).next() 找下一个兄弟 prev() $(“li”).prev() 找上一次兄弟 【案例：下拉菜单】this+children+mouseenter+mouseleave 【案例：突出展示】siblings+find 【案例：手风琴】next+parent 【案例：淘宝精品】index+eq
1.5 jquery操作样式（重点）
什么是样式？在style中写的都是，用css操作。
在标签里面写的叫属性，用attr方法操作，用法和css一样。 1.5.1 css操作
功能：设置或者修改样式，操作的是style属性。
设置单个样式 //name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色
设置多个样式 //参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" });
获取样式 //name:需要获取的样式名称 css(name); //案例 $("div").css("background-color");
注意：获取样式操作只会返回第一个元素对应的样式值。 隐式迭代： 1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值 2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
1.5.2 class操作: 使用于标签样式操作多的情况
添加样式类 //name：需要添加的样式类名，注意参数不要带点. addClass(name); //例子,给所有的div添加one的样式。 $(“div”).addClass(“one”);
移除样式类 //name:需要移除的样式类名 removeClass(“name”); //例子，移除div中one的样式类名 $(“div”).removeClass(“one”);
判断是否有样式类 //name:用于判断的样式类名，返回值为true false hasClass(name) //例子，判断第一个div是否有one的样式类 $(“div”).hasClass(“one”);
切换样式类 //name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 toggleClass(name); //例子 $(“div”).toggleClass(“one”);
属性操作。有个坑
在标签里面写的叫属性，用attr方法操作。使用和CSS一样。
功能：设置或者修改属性 设置单个属性 //name：需要设置的样式名称 //value：对应的样式值 attr(name, value); //使用案例 $("img").attr("title","www");//将标签的title属性设置值。
设置多个属性
//name：需要设置的样式名称
//value：对应的样式值
attr(name, value);
//使用案例
$("img").attr｛title："www"，title："www"｝;//将标签的title属性设置值。
获取属性：
consonle.log($("img").attr("title"));//获取并打印。
注意：从1.6开始，使用attr方法，如果没有设置属性的话会返回一个undefined,
对于布尔类型的属性如：checked/selected/disabled，不要用attr方法，要有prop方法。
3 动画：
3.1三组基本动画：显示show与隐藏hide是一组动画;滑入slideUp与滑出slideDown与切换slideToggle,
效果与卷帘门类似淡入fadeln与淡出fadeOut与切换fadeToggle.
show([speed],[callback]);
//show不传参,没有动画效果 //$('div').show();多都使用这种。
//show(speed)：
//speed：动画的持续时间 可以是毫秒 还可以是固定字符串
//fast:200ms normal:400ms slow:600
//$('div').show('ddd');无法识别默认400；
其他用法都一样，只是效果不一样。
3.2自定义动画：
$('box').animate( ｛left:800｝,8000,'swing' function(){} )
//第一个参数：对象，里面可以传需要动画的样式
//第二个参数，可选，动画的执行时间
//第三个参数，可选，动画的执行效果。默认swing秋千，linear匀速
//第四个回调函数callback
动画队列：
stop 停止当前正在执行的动画：
//$(this).children('ul').stop().slideUp();
//stop要写在前面，意思是停掉别人的动画，让自己的执行。
//参一clearQueue:是否清除动画队列，取true或false
//参二jumpToEnd:是否跳转到当前动画的最终效果，取布尔值。
通常我们都是。stop（）。animate() 一块使用。
音乐与视频：
标签：audio是音频标签 <audio src='mp3/1.ogg' controls='controls'></audio> 去掉controls='controls'就会隐藏。 $('audio').get(idx).load();//加载 jq里面没有音频和视频对象封装，是Dom对象的，所以获取的时候要用get（） $('audio').get(idx).play(); //播放音乐 video是视频标签
<video src='movie/movie1.mp4' controls='controls'></audio>
controls='controls'是显示播放，
<video src='movie/movie1.mp4' controls autoplay loop width='400'></audio>
autoplay 自动播放
loop 循环播放
4.jQuery节点操作：
4.1创建节点：append (分两步，先创建对象，再添加节点）
$('#box').append('<a href='' target='_blank'>传智播客</a>');
$('<span></span>')//创建span.
4.2添加节点：。
$('div').append($'p')//添加到最后，父元素添加到子元素
$('div').prepend($'p')//添加到前面
$('p').appendTo($'div')//添加到最后，子元素添加到父元素,这个更方便。
$('p').prependTo($'div')//添加到最前，子元素添加到父元素。
$('div').after($'p')//添加到元素的上面，上面讲的都是添加成子元素。
$('div').bfore($'p')//
4.3清空节点与删除节点：
empty 如果使用html清空会发生内存泄漏。
$('div').empty()；会清除对应的事件，清除的是孩子。
$('div').remove()；会删除节点。
4.4克隆节点
$('div').clone()；不传参数也是深度复制false，不会复制事件。不支持潜复制。
$('div').clone(true)；不传参数也是深度复制false，不会复制事件。参数为true可以复制事件。
5、特殊属性操作：
5.1val
操作value属性用val，可以给value设置值；不用attr操作；
获取input时可以用，
5.2html和text
jq中html相当于js中的innerHTML jq中text相当于js中的innerText；（innerText在火狐浏览器会存在兼容问题） 在jq中没有兼容性的问题。 html与text的区别： $('div').html();//获取的是内容和标签；没参数是获取，有参数是设置，设置时不会带上标签； $('div').text();//获取的是内容不带标签；没参数是获取，有参数是设置，设置会带上标签；对于回帖，防止攻击用text；
5.3width height方法:
$('div').width(400);//没参数是获取，传参是设置；获取的是width的值 $('div').heigth(400);//没参数是获取，传参是设置； $(window).width(400);//获取可视区页面宽度；
$('div').innerWidth();//获取的是padding+width的值
$('div').outerWidth();//获取的是padding+width+border的值
$('div').outerWidth(true);//获取的是padding+width+border+margin的值
5.4 scrollTop 与scrollLeft方法:
设置或获取垂直滚动条的位置
$(window).scrollTop();//获取页面被卷曲的高度
$(window).scrollLeft();//获取页面被卷曲的高度
5.5 offset 与position方法;
$(‘。son').offset();//获取元素相对与doument的高度与宽度；（相对页面）
$(‘。son').position();//获取元素相对与有定位的父元素的位置；
6、事件机制
click
//注册简单事件，给自己注册事件，缺点：一次只能注册一个事件；
知道有这个过程：目前都已经不用了。
注册多个事件 bind $('p').bind({clik:function(){alert('hehe')},mouseenter:function(){}});
委托事件delegate:可以选择谁来执行。动态创建也有事件。
原理：注册事件不是给自己注册事件，而是给父亲注册事件，所以产生的子类都具有事件。最终是给子类实现
。delegate（selector，参二，参三）
//参一：selector事件最终由谁来执行。
//参二事件的类型
//事件要做什么
缺点：只能注册委托事件
所以on 就出现了，既能给自己注册，也能注册委托事件。
on（’click',function（）｛｝）注册事件： //参一 给自己注册 //参二选择器，注册委托事件用，都是父类的事件，点的时候是冒泡出来的事件。 //参三注册委托事件用，data 一般都不写，如果穿了值，可以在里面通过e.data 来获取，，e是function的参数。以后里面的参数就会不变。 //参四函数 有参一和参四，没参二相当于bind, 有参二就是委托事件，给父类里面指定的元素执行。
事件的执行顺序：先执行委托的，再执行自己的。
事件解绑：off
//不传参数，把身上都解绑。$(selector).off() //传了参数，只用解除指定的事件。$(selector).off('click') 触发事件：trigger触发 也可以用以前的.click .trigger('click')
事件对象：
//screenX 和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面上角的位置（忽略滚动条） //pageX 和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离） //event.keyCode 按下的键盘代码 event是绑定时function的参数。 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation() 阻止事件冒泡行为 //event.preventDefault() 阻止浏览器默认行为
也可以用return false 阻止冒泡和浏览器行为。 //return.false 既能阻止事件冒泡，又能阻止浏览器默认行为。
7、补充：
7.1链式编程、
只有返回jq对象时，才能一直链式编程。设置性操作就能链式性编程；获取性操作不能链式；
end();//筛选选择器会改变JQ对象的Dom对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
//在链式编程时如果this改变时，需要上一次的就用end.
7.2 seach
便利方法，相当于for方法， 好处是在函数里面 不会污染；
//.each(function(index,element){})
index是下标。
element是DOM对象。
7.3如何解决与其他框架的$冲突问题；
只有jq在下面，拿到释放权才能释放；
//jQuery释放$的控制权
$.noConflict();
释放后就可以用jQuery代替$了。
也可以找个替代品 var $$=$.noConflict();
8插件：
想用jq的更多插件功能，引入便可；平时用的是基本的； 8.1使用插件： 插件的引入：先引入jq,在下面引入插件，然后就直接使用； 8.1.1jquery.color.js animate不支持颜色渐变，但是使用这个插件后，就可以支持颜色渐变了。 $('div').animate({backgroundColor:'#ffffff'},3000,function(){alert('hehe');}) 8.1.2jquery.lazyload.js 懒加载插件:适用与图片非常多，很长的网页。 等想要用的时候再加载。 如何使用看readme. 需要懒加载的图片随便给个类lazy，去掉把src属性名换掉成data-original，调用 $('img.lazy').lazyload(); 8.1.3jquery.ui.js 新闻插件, (官网提供的用的很少)一般用在后台。
使用时需要先引入一个css。
8.1.4用的较多的是bootstrap前端必备，处理后也可以用在手机端
8.2制作插件：
原理就是给jq对象增加一个方法；
1
浙公网安备 33010602011771号