jQuery - 介绍加载选择器样式操作属性操作绑定click事件

注意：以下部分问题不能实现效果，因该是单词拼写错误(少个t)或者没有加引号(“swing”)。。。

jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

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

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

<script type= " text/javascript " src= " js/jquery-1.12.2.js " ></script>

jquery的口号和愿望Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

jquery加载

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的window.onload 更快。

<script type= " text/javascript " >
 
$(document).ready(function(){
 
     ......
 
});
 
</script>

可以简写为：

<script type= " text/javascript " >
 
$(function(){
 
     ......
 
});
 
</script>

jquery选择器

jquery用法思想一
选择某个网页元素，然后对它进行某种操作

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

$( " #test " ).html()
 
         意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
 
         这段代码等同于用DOM实现代码： document.getElementById( " test " ).innerHTML;
 
         虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
 
         约定：如果获取的是jQuery 对象, 那么要在变量前面加上$. 
 
var $variable = jQuery对象
 var variable = DOM对象
 
$variable[ 0 ]：jquery对象转为dom对象$( " #msg " ).html(); $( " #msg " )[ 0 ].innerHTML

jquery的基础语法：$(selector).action()

参考：http://jquery.cuishifeng.cn/

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

对选择集进行修饰过滤(类似CSS伪类)

$( ' #ul1 li:first ' ) // 选择id为ul1元素下的第一个li
$( ' #ul1 li:odd ' ) // 选择id为ul1元素下的li的奇数行
$( ' # ul1 li:eq(2) ' ) // 选择id为ul1元素下的第3个li
$( ' #ul1 li:gt(2) ' ) // 选择id为ul1元素下的前三个之后的li
$( ' #myForm :input ' ) // 选择表单中的input元素
$( ' div:visible ' ) // 选择可见的div元素

表单选择器

    :enabled
    :disabled
    : checked
    :selected

<body>
 
<form>
    <input type= " checkbox " value= " 123 "  checked >
    <input type= " checkbox " value= " 456 "  checked >
 
  < select >
      <option value= " 1 " >Flowers</option>
      <option value= " 2 " selected= " selected " >Gardens</option>
      <option value= " 3 " selected= " selected " >Trees</option>
      <option value= " 3 " selected= " selected " >Trees</option>
  </ select >
</form>
 
<script src= " jquery.min.js " ></script>
<script>
    // console.log($("input:checked").length);      // 2
 
    // console.log($("option:selected").length);    // 只能默认选中一个,所以只能lenth:1 
 
    $( " input:checked " ).each(function(){
 
        console.log($( this ).val())
    })
 
</script>
 
</body>

such as

对选择集进行函数过滤

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

选择集转移

$( ' div ' ).prev( ' p ' ); // 选择div元素前面的第一个p元素
$( " div " ).prevAll()
$( " div " ).prevUntil()   // 直到找到符合括号里面的条件的停止
$( ' div ' ).next( ' p ' ); // 选择div元素后面的第一个p元素
$( " .test " ).nextAll()
$( " .test " ).nextUntil()
$( ' div ' ).closest( ' form ' ); // 选择离div最近的那个form父元素
$( ' div ' ).parent(); // 选择div的父元素
$( " .test " ) .parents();所有级别的父级别标签
$( " .test " ).parentUntil() ；所有级别的父级别标签，直到。。。
$( ' div ' ).children(); // 选择div的所有子元素
$( ' div ' ).siblings(); // 选择div的同级元素
$( ' div ' ).find( ' .myClass ' ); // 选择div内的class等于myClass的元素

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值

操作行间样式

// 获取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。

操作样式类名

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

jquery属性操作

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

// 取出html内容
 
var $htm = $( ' #div1 ' ).html();
 
// 设置html内容
 
$( ' #div1 ' ).html( ' <span>添加文字</span> ' );

2、text() 取出或设置text内容

// 取出文本内容
 
var $htm = $( ' #div1 ' ).text();
 
// 设置文本内容
 
$( ' #div1 ' ).text( ' <span>添加文字</span> ' );

3、attr() 取出或设置某个属性的值

// 取出图片的地址
 
var $src = $('#img1').attr('src');
 
// 设置图片的地址和alt属性
 
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){
 
    // 内部的this指的是原生对象
 
    // 使用jquery对象用 $(this)
 
})

事件委派
　　$(父标签).on("click",".item",function(){});
　　--- 解决添加子元素的绑定事件

　　$(标签).off(事件)
　　--- 解除事件

jquery特殊效果

 fadeIn() 淡入
 
     $btn.click(function(){
 
         $('#div1').fadeIn(1000,'swing',function(){
             alert('done!');
         });
 
     });
 
 fadeOut() 淡出
 fadeToggle() 切换淡入淡出
 hide() 隐藏元素
 show() 显示元素
 toggle() 依次展示或隐藏某个元素
 slideDown() 向下展开
 slideUp() 向上卷起
 slideToggle() 依次展开或卷起某个元素

尺寸1、获取和设置元素的尺寸相关、滚动事件

width()、height()    获取元素width和height
innerWidth()、innerHeight()  包括padding的width和height
outerWidth()、outerHeight()  包括padding和border的width和height
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

offset()

3、获取可视区高度

$(window).height();

4、获取页面高度

$(document).height();

5、获取页面滚动距离

$(document).scrollTop();
$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){
    ......
})

jquery事件

事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数，依次运行多个函数
unload() 用户离开页面

事件冒泡

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

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

阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();
 
    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})
 
......
 
<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默认行为
阻止右键菜单

$(document).contextmenu(function(event) {
    event.preventDefault();
});

合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();
// event.preventDefault();
 
// 合并写法：
return false;

jquery元素节点操作

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

滚轮事件与函数节流

jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>整页滚动</title>
     <link rel="stylesheet" type="text/css" href="css/test.css">
     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
     <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
     <script type="text/javascript">
         $(function(){
 
             var $h = $(window).height();
             var len = $('.pages').length;
             var $points = $('.points li');
             var $pages = $('.pages');
             var nowscreen = 0;
             var timer = null;
 
             $pages.eq(0).addClass('moving');
 
             $('.pages').css({height:$h});
 
             //dat的值：-1是向下滑动，1是向上滑动
             $(window).mousewheel(function(event,dat){
 
                 //清掉前面刚刚开的定时器
                 clearTimeout(timer);
 
                 // 最新的一次定时器
                 timer = setTimeout(function(){
 
                     if(dat==-1)
                     {
                         nowscreen++;
 
                         if(nowscreen>len-1){
                             nowscreen=len-1;
                         }
                     }
                     else
                     {
                         nowscreen--;
 
                         if(nowscreen<0){
                             nowscreen=0;
                         }
                     }
 
                     $('.pages_con').animate({top:-$h*nowscreen},300);
 
                     $points.eq(nowscreen).addClass('active').siblings().removeClass('active');
 
                     $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
 
                 },200);
             })
 
             $points.click(function(){
 
                 $(this).addClass('active').siblings().removeClass('active');
                 $('.pages_con').animate({top:-$h*$(this).index()},300);
 
                 $pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
 
             })
 
         })
 
     </script>
 </head>
 <body>
     <div class="pages_con">
 
         <div class="pages page1 moving">
             <div class="main_con">
                 <div class="left_img"><img src="data:images/001.png"></div>
                 <div class="right_info">
                 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
 
                 </div>
             </div>
         </div>
 
         <div class="pages page2">
             <div class="main_con">
                 <div class="right_img"><img src="data:images/002.png"></div>
                 <div class="left_info">
                 2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                 </div>
             </div>
 
         </div>
 
         <div class="pages page3">
             <div class="main_con">
                 <div class="left_img"><img src="data:images/004.png"></div>
                 <div class="right_info">
                 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
 
                 </div>
             </div>
         </div>
 
         <div class="pages page4">
             <div class="main_con">
                 <div class="left_img"><img src="data:images/003.png"></div>
                 <div class="right_info">
                     Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                 </div>
             </div>
         </div>
 
         <div class="pages page5">
             <div class="main_con">
                 <div class="center_img"><img src="data:images/005.png"></div>
             </div>
         </div>
 
     </div>
 
     <ul class="points">
         <li class="active"></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
 </body>
 </html>

整屏滚动