您的位置：首页 > Web前端 > JQuery

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

2017-08-14 16:54 1191 查看

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
<!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="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="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="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="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="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>
整屏滚动

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航