给你一个好的未来

尚硅谷Java培训Javaweb课程内容核心技术Jquery内容介绍

1．简介

1）jquery是目前最流行的一种JavaScript库。

2）所谓JavaScript库就是对JavaScript进行进一步封装和开发，然后将其打包为js文件方便重复调用。jquery也可称为JavaScript框架。

3） jquery的主要功能是简化JavaScript的开发工作。并且基本解决了浏览器的兼容问题。

2．核心函数

2.1 $是jquery的核心函数。

jquery的大部分功能都是核心函数来完成的。

2.2核心函数根据实参的不同，有四种不同的用法

2.2.1传入一个函数作为参数

如：$(function(){})

作用：和window.onload = function(){}一样，在文档加载完成后调用

2.2.2传入一个选择器的字符串

如：$(“#id”)

作用：和document.getElementById(“id”)一样，从文档查询需要的元素

2.2.3传入一段HTML代码

如：$(“<li>广州</li>”)

作用：创建一个li对象

2.2.4传一个DOM对象

如：var ele=document.getElementById(“abc”); var x= $(ele);

作用：将一个js获取的dom对象转化为一个jquery对象。这样就可以使用jquery里面的方法了

3．jquery对象与dom对象

3.1 dom对象

dom对象是原生的网页文档对象。可以通过js获取到文档对象。然后进行增删改操作。

3.2 jquery对象

jquery对象是使用jquery包装后的文档对象。只有这个对象才可以调用jquery的方法。dom对象不是jquery 的对象，所以我们不能调用jquery的方法，我们需要将其包装为jquery对象才可

3.2.1 DOM对象

通过原生JS获取的对象是DOM对象

3.2.2 jQuery对象

通过jQuery核心函数包装过的对象叫做jQuery对象

3.2.3比较

1）两种对象之间不能互相调用对方的方法

2）命名上的区别：

jQuery对象命名时习惯加上$,加以区分。

3.2.4转换

1）DOM –> jQuery

$(DOM对象)

2）jQuery –> DOM

jQuery对象[索引]

jQuery对象的本质就是DOM对象的数组，所以可以通过给对象加下标的形式获取数组中的DOM对象

4．jquery选择器

4.1 选择器简介

1）jQuery的最厉害的地方就是它拥有众多的选择器。

2）jQuery的选择器主要是集合CSS和xPath部分语法。

3）选择器可以很方便的获取到页面中元素。

4.2 常见jquery选择器

4.2.1基本选择器

1）id选择器 $(“#id”)

2）类选择器 $(“.class”)

3）元素选择器 $(“标签名”)

4）选择所有元素 $(“*”)

5）选择器分组 $(“选择器1 , 选择器2 , 选择器N”)

4.1.2层次选择器

1）后代元素 $(“祖先元素后代元素”)

2）子元素 $(“父元素 > 子元素”)

3）下一个兄弟元素 $(“前一个 + 后一个”)

4）下边所有兄弟元素 $(“前一个 ~ 后边所有”)

4.1.3过滤选择器

参见jqueryAPI

5．jquery筛选

以已经查到的元素为标准，再进行查询。DOM查询

5.1过滤

eq(index|-index) 获取第N个元素 $(“p”).eq(1)；

first() 获取第一个元素 $(“p”).first();

last() 获取最后一个元素 $(“p”).last();

5.2查找

children([expr]) 获取所有的子元素（不包括孙子<后代元素>）

find(expr|obj|ele) 找出所有的后代元素

next([expr]) 相邻后一个的元素

parent([expr]) 获取某元素的直接父元素

parents([expr]) 获取某元素的祖先元素，不包含根元素

prev([expr]) 获取元素的前一个元素

5.3其余查看jquery文档

6．jquery事件

6.1常见事件列表

事件详情参见jquery文档

blur([[data],fn])

change([[data],fn])

click([[data],fn])

dblclick([[data],fn])

keypress([[data],fn])

keyup([[data],fn])

mousedown([[data],fn])

mouseenter([[data],fn])

mouseleave([[data],fn])

mousemove([[data],fn])

mouseout([[data],fn])

mouseover([[data],fn])

6.2事件绑定

1）使用事件对应的函数进行绑定

如：$(“#btn”).click(function(){

alert(“我被点击啦！”);

})

2）使用bind()绑定事件：用法：元素.bind(事件名,[参数],回调方法)

如：$(“p”).bind(“click”, function(){

alert( $(this).text() );

});

可以绑定多个事件，多个事件用空格隔开

如：$(‘#foo’).bind(‘mouseenter mouseleave’, function() {

$(this).toggleClass(‘entered’);

});

3）绑定一个一次性的事件，事件只会触发一次。one()；

如：$(“p”).one(“click”, function(){

alert( $(this).text() );

});

4）为当前的对象以及以后创建的对象都绑定此事件

如：$(“p”).live(“click”, function(){

alert(“我是p！”);

});

6.3解除绑定

使用unbind()方法解除事件绑定。

不传参数，取消当前元素的所有事件

如：$(“p”).unbind()

2）传递参数，取消某个事件

如：$(“p”).unbind(“click”)

3）传递多个参数，用空格隔开：取消一组事件

如：$(“p”).unbind(“click mouserover”);

6.4事件冒泡

例子：

<div>

<div>

为div和p同时绑定点击事件。当点击p的时候，div的点击事件也会被触发

$(“div”).click(function(){alert(“我是div”)});

$(“p”).click(function(){alert(“我是p”)});

当我们点击p的时候,先弹出我是p，又弹出我是div。

阻止事件冒泡：

return false；即可。

7．dom增删改

7.1文档操作

对dom对象的增删改

7.1.1内部插入

append(content|fn)：父.append(子)：父元素的最后插入子元素

prepend(content|fn)：父.prepend(子)：父元素的最前面插入子元素

appendTo(content)：子.appendTo(父)：子元素添加到父元素的最后

prependTo(content)：子.prependTo(父)：子元素添加到父元素的最前面

7.1.2外部插入

after(content|fn) ：A.after(B)：a的后边插入b

insertAfter(content) ：A.insertAfter(B)：把a插入到b后边

before(content|fn) ：A.before(B)：a的前边插入b

insertBefore(content) ：A.insertBefore(B)：把a插入到b的前边

7.1.3替换

replaceWith(content|fn) ：A.replaceWith(B)：A被B替换（A不存在,B存在）

replaceAll(selector) ：A.replaceAll(B)：A替换所有B（B不存在，A存在）

7.1.4删除

empty() ：A.empty()：将A元素下的子元素全部删除（将A置空，子元素没有，A还在）

remove([expr]) ：A.empty()：将A元素删除（A不存在）

7.1.5复制

clone([Even[,deepEven]]) ：A.clone()：克隆A元素并选中克隆的副本

7.2属性操作

对dom对象属性的增删改

7.2.1属性

attr(name|pro|key,val|fn) ：

获取属性值：$(“img”).attr(“src”);

设置属性值：$(“img”).attr(“src”,”test.jpg”);

设置多属性：$(“img”).attr({ src: “test.jpg”, alt: “Test Image” });

removeAttr(name) ：移除属性：$(“img”).removeAttr(“src”);

prop(name|pro|key,val|fn)1.6+ ：一般用来操作内置属性

获取属性值：$(“input[type=’checkbox’]”).prop(“checked”);

设置属性值：$(“input[type=’checkbox’]”).prop(“checked”,true);

设置多属性：$(“input[type=’checkbox’]”).prop({ disabled: true});

removeProp(name)1.6+ ：移除属性：$(‘div’).removeProp(‘style’)

7.2.2 CSS 类

addClass(class|fn) ：A.addClass(“selected1 selected2”)：为A添加两个class

removeClass([class|fn]) ：

A.removeClass(“selected1 selected1”)：删除A的两个class，

A.removeClass()：删除A的所有class

toggleClass(class|fn[,sw]) ：

A.toggleClass(“highlight”)：切换A的class，如果有highlight移除，如果没有添加

7.2.3 HTML代码/文本/值

html([val|fn]) ：

获取html内容：A.html()；

设置html内容：A.html(“<a href=’#’>链接</a>”)

text([val|fn])

获取文本内容：$(‘p’).text();

设置文本内容：$(“p”).text(“Hello world!”);

val([val|fn|arr])

获取表单元素值：$(“input”).val();

设置表单元素值：$(“input”).val(“hello world!”);

7.3 css操作

对dom对象样式的增删改

7.3.1 CSS

css(name|pro|[,val|fn]) ：

获取css值：$(“p”).css(“color”);

设置css值：

$(“p”).css({ color: “#ff0011”, background: “blue” });

$(“p”).css(“color”,”red”);

7.3.2位置

offset([coordinates])

position()

scrollTop([val])

scrollLeft([val])

7.3.3尺寸

outerHeight([soptions])

outerWidth([options])

8．jquery动画

1）show([speed,[easing],[fn]]);

显示隐藏的元素：

$(“p”).show()；

$(“p”).show(“slow”);

2）hide([speed,[easing],[fn]]);

隐藏显示的元素:

$(“p”).hide()；

$(“p”).hide(“slow”);

3）toggle([speed],[easing],[fn]);

切换元素的显示状态

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$(‘p’).toggle(); //显示隐藏p

$(‘p’).toggle(“slow”);

$(‘#foo’).toggle(showOrHide); // showOrHide是个true或者false值，如果这个参数为true ，那么匹配的元素将显示;如果false ，元素将隐藏

想要了解跟多关于Java培训课程内容欢迎关注尚硅谷Java培训，尚硅谷除了这些技术文章外还有免费的高质量Java培训课程视频供广大学员下载。

上一篇: Java培训之Javaweb课程dom操作
下一篇: 数据挖掘经典算法汇总