html jquery java_Java前端中的JQuery

jQuery 核心

"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象，通过该对象

可以获取 jQuery 对象，调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供

的方法。 $ <==> jQuery

DOM 对象和 jQuery 包装集对象

Dom 对象

javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:var div = document.getElementById("testDiv");

var divs = document.getElementsByTagName("div");

jQuery 包装集|对象var jQueryObject = $("#testDiv");

Dom 转 jQuery 对象Dom 对象转为 jQuery 对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv'); // 获取 Dom 对象

mydiv = $(domDiv);

4. jQuery 对象转 Dom 对象

jQuery 对象转 Dom 对象，只需要取数组中的元素即可

//第一种方式 获取 jQuery 对象var jqueryDiv = jQuery('#mydiv');

//第二种方式 获取 jQuery 对象jqueryDiv = $('#mydiv');

var dom = jqueryDiv[0];//将以获取的 jquery 对象转为 dom

通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象$('#mydiv').each(function() {//遍历

var jquery = $(this);

}) ；

基础选择器 Basics

选择器 名称 举例

id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素

元素名称选择器 element $("div")选择所有 div 元素

类选择器 .class $(".blue")选择所有 class=blue 的元素

选择所有元素 * $("*")选择页面所有元素

组合选择器 selector1, selector2, selectorN $("#testDiv,span,.blue")同时选中这几个选 择器匹配的元素

层次选择器 Hierarchy

选择器 名称 举例

后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素

子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素

相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素

同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素

表单选择器 Forms

表单选择器

$(":radio") 选择所有单选框按钮

$(":checkbox")选择所有复选框按钮

过滤选择器

$(":checked")选择所有选中状态的元素(单选框和复选框)

$(":checkbox:checked")选择所有复选框被选中的元素

$(":checkbox:checked:eq(index)")匹配被选中的选择的指定下标的元素

$(":checkbox:checked").eq(index)

$(":checked:gt(index)")选择下标大于指定值的元素

$(":odd")选择所有的奇数下标的元素

$(":even")选择所有的偶数下标的元素

属性选择器

$("[属性名]")$("[name]")选择所有设置过name属性值的元素

$("[属性名=属性值]")$("[id='myId']")选择所有属性名等于指定属性值的元素

jQuery DOM 操作

操作元素的属性

获取属性

attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr('checked') attr('name')

prop(属性名称) 获取具有 true 和 false 两个属性的属性值 prop('checked')

设置属性

attr(属性名称，属性值) 设置指定的属性值，操作 checkbox 时选中返回 checked，没有选中返 回 undefined。 attr('checked',’checked’) attr('name',’zs’)

prop(属性名称，属性值) 设置具有 true 和 false 两个属性的 属性值 prop('checked',’true’)

移除属性

removeAttr(属性名) 移除指定的属性 removeAttr('checked')

操作元素的样式

attr(“class”) 获取 class 属性的值，即样式名称

attr(“class”,”样式名”) 修改 class 属性的值，修改样式

addClass(“样式名”) 添加样式名称

css() 添加具体的样式

removeClass(class) 移除样式名称增加元素的具体样式，格式：

1)css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})

例：css({"background-color":"red","color":"#fff"})

2)css(“样式名”,”样式值”)

例：css('color','white')

操作元素的内容

html() 获取元素的 html 内容

html("html 内容") 设定元素的 html 内容

text() 获取元素的文本内容，不包含 html

text("text 内容") 设置元素的文本内容，不包含 html

val() 获取元素 value 值

val(‘值’) 设定元素的 value 值

创建元素$(‘元素内容’)

$(‘

this is a paragraph!!!

’)

添加元素

prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以 是字符、HTML 元素标记。

$(content).prependTo( selector) 把 content 元素或内容加入 selector 元素开头 append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).appendTo(s elector) 把 content 元素或内容插入 selector 元素内，默认是在尾部

before() 在元素前插入指定的元素或内容:$(selector).before(content)

after() 在元素后插入指定的元素或内容:$(selector).after(content)

删除元素

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。

empty() 清空所选元素的内容

遍历元素

each()$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element 是当前的元素，此时是 dom 元素。

Jquery 事件

ready()加载事件

ready()类似于 onLoad()事件 ready()可以写多个，按顺序执行 $(document).ready(function(){})等价于$(function(){})

bind()绑定元素事件为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject))

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可 以包括如下： blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]：传递的参数，格式：{名:值,名 2:值 2}

handler(eventObject)：该事件触发执行的函数

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件(事件类型)

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

事件

按钮1

按钮2

按钮3

按钮4

按钮5

// 简单的bind事件

$("#btn1").bind("click",function(){

console.log("这是一个简单的bind事件");

});

// 原生的js绑定点击事件

document.getElementById("btn1").onclick = function(){

console.log("这是原生的js绑定点击事件");

}

/* ============ 绑定多个事件 ===========*/

// 多个事件绑定同一个函数

$("#btn2").bind("click mouseout",function(){

console.log("多个事件绑定同一个函数...");

});

// bind链式编程

$("#btn3").bind("click",function(){

console.log("Hello...");

}).bind("mouseout",function(){

console.log("Hi...");

});

$("#btn4").bind({

"click":function(){

console.log("你好...");

},

"mouseout":function(){

console.log("我不好...");

}

});

$("#btn5").click(function(){

console.log("...");

}).mouseout(function(){

console.log("。。。");

});