当前位置:首页 > 网站制作 > jQuery教程 > jQuery内部培训大纲

jquery教学大纲 jQuery内部培训大纲

2017-02-04 | 来源:网络 | 人气: | | 关键字: jquery教学大纲
jquery内部培训大纲配置jquery1 插入jquery在js中,无论是jquery还是YUI又或者是其它的一些js库,都必须以script标签来引用该库,而script标签是

公司用的jQuery内部培训大纲

jquery内部培训大纲

配置jquery

1 插入jquery

在js中,无论是jquery还是YUI又或者是其它的一些js库,都必须以script标签来引用该库,而script标签是一个双标签,是需要结束标签的.其中src是用来指定js的链接的,js可以在本地引用,也可以引用网络上的url.该标签应该在所有的js之前引用上.

<head>

公司用的jQuery内部培训大纲

2 行内式

顾名思义,行内式跟css的行内式是一个道理,写在html标签中的js也就是我们的行内式写法.

<a href="www.baidu.com" onclick="return false">点击这里不会跳转到百度</a>

3 嵌入式

一般嵌入式会有两种写法,一种是写在head里面,一个是写</body>后面.因为页面加载是从上往下执行的,如果你的js写在head里面的话,那么这段js将会无法被执行到,如果你一定要写在选择器之前的话,切记一定要代码分离.如果是写在</body>下面的话则不需要代码分离.

<script>

(function(){ //代码分离(‘a’).click(function(){

return fasle;

})

})

</script>

4 分离式

也就是把js代码用单独的文件写好,再引入到html中,注意事项跟嵌入式一致.

选择器以及Dom操作

公司用的jQuery内部培训大纲

1 选择器

1.1 ID选择器

$(‘#box’).click(function(){alert(‘我是ID选择器’)});

1.2 类选择器

$(‘.span’).click(function(){alert(‘我是类选择器’)});

1.3 元素选择器

$(‘ul’).click(function(){alert(‘我是元素选择器’)});

1.4 混合型选择器

选择第二个li

$(‘li:eq(1)’).click(function(){alert(‘我是第二个li’)}) //索引从0开始;

选择span里面的a

$(‘.span a’).click(function(){alert(‘我是span里面的a’)}) //索引从0开始;

2 Dom操作

2.1 获取子级元素

$(‘#box ul’).children()[1] //获取到第二个li的所有html,与获取html()方法一样

2.2 获取父级元素

$(‘.span’).parent() //获取到p

2.3 获取同级元素

$(.span).siblings() //获取到另外一个span

2.4 获取text

$(‘#box ul’).children()[1].text() //2

[Www.aloNely.Com.Cn]2.5 获取html

$(‘#box ul’).children()[1].html() //<li><a href="#"></a>2</li>

2.6 获取value

$(‘.span’).children(‘input’).val() //i’m input

2.7 修改attr

$(‘.span’).children(‘input’).attr(‘type’,’button’) //把text类型改成button类型的input

事件

事件写法

$(dom).click(function(){

~~~

})

1 表单事件

1.1 submit

表单提交事件

1.2 reset

表单重置事件

1.3 click

表单点击事件

1.4 change

表单变化事件,此事件只能用户文本域(textarea)

1.5 focus

焦点(聚焦)事件

1.6 blur

失去焦点事件

2 window事件

2.1 load事件

(window).load(functiopn())此事件与(document).ready事件不同,(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。而(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到(document).ready()了。同时(document).ready也等于上文所说的$(function(){~~})这个代码分离.

2.2 重定向事件

在页面加载完成后自动跳转到百度

$(window).load(function(){

})

windows.location.href=”/url” //当前页面打开URL页面

this.location.href=”/url” //当前页面打开URL页面

parent.location.href=”/url” //在父页面打开新页面

top.location.href=”/url” //在顶层页面打开新页面

    window.open('baidu.com','newwindow','width=500')//链接,打开方式,新窗口参数;参考网站http://www.cnblogs.com/stswordman/archive/2006/06/02/415853.html

3 鼠标事件

3.1 click

单击事件(点击事件)

3.2 dbclick

双击事件

3.3 mouseover

用户把鼠标从一个元素移动到另外一个元素上时触发

3.4 mouseout

用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上

3.5 mousedown

用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发

3.6 mouseup

用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发

3.7 mouseenter(不冒泡)

用户光标进入元素上时触发,与mouseover不同,不触发父元素与子元素

3.8 mouseleave(不冒泡)

用户的光标离开元素时触发,与mouseout不同,不触发父元素与子元素

 

评论

评论数10

表情
发表评论
网友评论仅供其表达个人看法,并不表明网易立场。
《jQuery内部培训大纲》更多评论

头条推荐

阅读下一篇

返回jQuery教程 返回网站首页