jquery与java_JAVA学习之路~JQuery-Day28

一.jQuery的优点(1)提供了强大的功能函数

(2)解决浏览器兼容性问题

(3)实现丰富的 UI 和插件

(4)纠正错误的脚本知识

二.jQuery的核心

1.用法用之前先引入jquery的文件

2.核心

三.DOM 对象和 jQuery 包装集对象

1.dom对象

代码示例:

/*Dom对象*/

var divDom = document.getElementById("mydiv");

console.log(divDom);

2.jquery获取对象

/*Jquery包装集对象*/

var divJquery = $("#mydiv");

console.log(divJquery);

3.dom对象转jquery对象

var domToJquery = $(divDom);

4.jquery对象转dom对象

//第一种方式

var jqueryToDom = divJquery[0];

//第二种方式

// each() Jquery方法，遍历方法

divJquery.each(function(index,element){ //两个参数一般不写

console.log(index);

console.log("--------");

console.log(element);// dom对象

console.log(this); // dom对象

});

四.jquery的选择器

1.基础选择器(必须掌握前三种)1、ID选择器

格式：$("#id属性值")

获取指定id值的对象(只会获取到第一个id的值)

2、类选择器

格式：$(".class属性值")

获取所有指定class属性值的元素

3、元素选择器

格式：$("元素名/标签名")

获取所有指定标签名的元素

4、通用选择器

格式：$("*")

获取所有的元素的对象

5、组合选择器

格式：$("选择器1,选择器2...")

代码示例:

div2

div1

div3

div4

这是一个P

这是一个span

// id选择器

var div1 = $("#div1");

console.log(div1);

// 类选择器

var cls = $(".test");

console.log(cls);

// 元素选择器

var divs = $("div");

console.log(divs);

// 通用选择器

var all = $("*");

console.log(all);

// 组合选择器

var group = $("#div1,span,.test");

console.log(group);

2.层次选择器(了解)1.后代选择器 ancestor descendant

格式: $("#parent div") 选择id为parent的元素的所有div元素

2..子代选择器 parent > child

格式:$("#parent>div")

选择id为parent的直接div子元素

3.相邻选择器 prev + next 只会查询指定元素的下一个指定元素(只往下找一次元素)

格式:$(".blue + img")

选择css类为blue的下一个img元素

4.同辈选择器 prev ~ sibling

格式:$(".blue ~ img")

选择css类为blue的之后的img元素

3.表单选择器1.表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select

示例:var inputs= $(":input"); // 表单选择器，所有表单元素(所有标签)

2.非表单元素：div、span、p、h1~h6、img、a、table

var inputs2= $("input"); //元素选择器(只选择元素名为input的元素)

4.过滤选择器1:checked 选择所有被选中的元素

2:eq(index) 匹配指定下标的元素

3:gt(index) 匹配下标大于指定值的所有元素

4:odd 选择每个相隔的(奇数) 元素

5:even 选择每个相隔的(偶数) 元素

爱好:篮球

爬床

代码

爬床1

代码1

var checkboxs = $(":checkbox");

checkboxs.each(function(){

console.log(this);

console.log(this.checked);//打印所有input

});

console.log("==============");

var ckeckeds = $(":checkbox:checked");

ckeckeds.each(function(){

console.log(this); //只打印 checked="checked"的input

});

console.log("==============");

var second = $(":checkbox:eq(1)")//打印下标为1的

second.each(function(){

console.log(this);

});

console.log("==============");

var gtfirst = $(":checkbox:gt(0)") //gt(index) 匹配下标大于指定值的所有元素

gtfirst.each(function(){

console.log(this);

});

console.log("==============");

var odds= $(":checkbox:odd") //odd 选择每个相隔的(奇数) 元素

odds.each(function(){

console.log(this);

});

五.操作元素的属性

1.获取属性的值attr(属性名称) 获取指定的属性值:

操作 checkbox 时选中返回 checked，没有选中返回 undefined。

attr('checked')

attr('name')--name要获取的属性的名称

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

prop('checked')

2.设置属性的值attr(属性名称,属性值);

prop(属性名称,属性值);

3.移除属性的值移除属性 removeAttr(属性名)

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

总结:

如果属性的返回值是true或false(checked、selected、disabled)，使用prop()方式；

其他属性使用attr();

六.操作元素的样式1.attr(“class”) 获取class属性的值，即样式名称

2.attr(“class”,”样式名”)

修改class属性的值，修改样式

3addClass(“样式名”)

添加样式名称

4.css() 添加具体的样式

5.removeClass(class)

移除样式名称

css()方法设置元素样式

天蓝色

大红色

天蓝色

/* attr */

// 设置元素的class属性(如果属性不存在，则添加属性)

$("#conRed").attr("class","red");

// 如果属性存在，则修改属性值

$("#conBlue").attr("class","green");

// addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准

$("#conRed").addClass("larger");

// css()

// 添加一个具体样式 css("样式名","样式值")

$("#remove").css("color","red");

// 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})

$("#remove").css({"color":"red","font-family":"楷体","background-color":"gray"})

七.操作元素的内容

1.获取元素的内容1.html() 获取元素的html内容

2.text() 获取元素的文本内容，不包含标签

3.val() 获取元素value值

2.设置元素的内容1.html("html,内容") 设定元素的html内容

2.text("text 内容") 设置元素的文本内容，不包含标签

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

html()和text()方法设置元素内容

这是一个Div

span标签

这是P

// 设置(非表单)元素的内容

// 包含的html标签

$("#html").html("

上海

");

// $("#html").html("上海");

// 不包含html标签,只能设置纯文本

$("#text").text("

上海

");

$("#text").text("上海");

// 设置表单元素的值

$("input").val("Hello");

// 获取元素的值

console.log($("#getHtml").html());

console.log($("#getHtml").text());

console.log($("input").val());

八.添加元素1.创建元素 $("元素内容")

2.添加元素:

方式1:

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

方式2:

$(content).prependTo(selector)把 content 元素或内容加入 selector 元素开头

方式3:

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

方式4:

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

方式5:

before()

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

方式6:

after()

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

男神

偶像

小鲜肉

// 父元素

var parent = $("#parent");

// 要追加的内容

var span = $('女神');

// 前追加 (追加的都是子元素)

// prepend(content)

parent.prepend(span);

// $(content).prependTo(selector)

$(".blue").prependTo(parent);

// 后追加(追加的都是子元素)

var singer = '歌手';

// append(content)

// parent.append(singer);

// $(content).appendTo(selector)

$(singer).appendTo(parent);

// 插入同级元素

// $(selector).before(content)

$("#xxr").before("

小奶狗

");

// $(selector).after(content)

$("#xxr").after("

老腊肉

");

九.删除元素

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

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

十.遍历元素

each()

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

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

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

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

遍历元素 each()

jquery

javase

http协议

servlet

$(".green").each(function(index,element){

console.log(index); //index 为遍历元素的序列号，从 0 开始。

console.log(element);//element是当前的元素，此时是dom元素。

console.log(element.innerHTML);//获取元素的内容:jquery,javase,>http协议,servlet

console.log($(element).html());//获取元素的内容,结果同上;

});

十一:jquery事件1.ready()加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

onload与ready()的区别：

1、ready()在DOM结构解析完毕后即执行

2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行

绑定事件示例:

按钮

// 直接绑定事件

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

alert('这是个按钮。。。');

});

/*绑定多个事件*/

// 聚焦失焦事件

// 方式一：

$("#txt").focus(function(){

// 聚焦时清空文本框

$("#txt").val("");

}).blur(function(){

$("#txt").val("你好");

});

// 多个事件绑定一种行为

$("#txt").bind("focus blur",function(){

console.log("。。。");

});

$("#txt").bind("focus",function(){

console.log("aaa");

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

console.log("bbb");

});

$("#txt").bind({

focus:function(){

console.log("链式编程1");

},

blur:function(){

console.log("链式编程2");

}

});

十二:文章最后用一个例子来结束今天jquery的学习

案例:---表格的增删改查

现在有一个表格,我有省份名称,城市名称,邮编,操作4个字段,

默认有三行数据,操作单元格内有修改和删除按钮;

需求:

1.点击删除,弹出对话框,询问用户是否确认删除,确认删除就删除选中这行的记录,且对话框中有确认和取消按钮;

2.给表格添加一个添加按钮,可以添加记录,点击添加按钮弹出模态框并显示三个文本框分别填写以上的三个字段,填写完成,自动关闭模态框;

3.点击修改按钮,同样弹出同一个模态框,修改内容后,点击模态框的提交更改按钮就ok;

1.头部,引入核心文件

表格的增删改查

2.

中的内容

//

//bootstrap的属性直接引用

//

添加

//表格 引用的bootstrap的样式

省份名称城市邮编操作

上海浦东66666

修改

删除

江苏如皋226534

修改

删除

江苏苏州226500

修改 //修改按钮

删除 //删除按钮

×

添加内容

//

省份

名称

名称

关闭

提交更改

点击修改按钮执行删除功能

//定义主键

var mid=null;//修改操作使用

/*

*

* 删除功能:用户点击删除时询问用户是否确认删除记录，如果确认，则删除该记录

* */

//删除选中行的记录

function deleteTr(_this) {

// jquery-confirm插件

$.confirm({

title: '删除!', // 确认框的标题

content: '您确认要删除该记录吗？',// 确认框的文本内容

buttons: { // 确认框上绑定的按钮组

confirm: {

text: '确认', // 按钮的文本

btnClass: 'btn-danger', // 按钮的颜色

keys: ['enter', 'shift'], // 点击键盘上的指定按钮触发该函数

action: function(){ //确认删除时

// 得到按钮的父元素td，再得到td的元素的tr

var tr = $(_this).parent().parent();

//移除tr

tr.remove();

}

},

cancel:{

text:"取消",

btnClass: 'btn-info'

}

}

});

}

添加功能

/*

* 添加功能

* */

function addData (name,city,code){

//需要拼接tr对象---就是拼接一行记录

var tr="

";

tr += "

"+name+"";

tr += "

"+city+"";

tr += "

"+code+"";

tr +="

";

tr +=" 修改";

tr +='  删除';

tr +="

";

//拼接玩需要加这一行记录追加到最后

//获得表格的对象

$("#mytable").append(tr);

//添加完关闭模态框

$('#myModal').modal('hide');

};

修改功能

/*

* 修改数据:难点在于如何将修改按钮与模态框的按钮建立联系

* 根据需求:在每一行自定义了主键id

* */

function updateData(name,city,code){

//获取指定主键的tr下的td的对象

var tds=$("tr_"+mid).children();

tds.eq(0).text(name);//获取指定下标的元素

tds.eq(1).text(city);

tds.eq(2).text(code);

//清空type

$("#type").val("");

};

打开模态框功能(不管点击添加还是修改需要)

/*

* 打开模态框

* */

function openDialog(_this,id){

//得到按钮的父元素td,在得到td的父元素tr

var tr=$(_this).parent().parent();

// 得到tr的所有td子元素

var tds=tr.children();

//获取填充文本框的值(获取到第一个单元格的文本内容)

var name=tds.eq(0).text();

var city=tds.eq(1).text();

var code=tds.eq(2).text();

//给文本框赋值

$("#name").val(name);

$("#city").val(city);

$("#code").val(code);

//设置添加操作还是修改操作(添加=0,修改=1)

$("#type").val(1);

//给主键赋值

mid=id;

// 修改模态框的标题

$("#myModalLabel").html("修改记录");

// 打开模态框

$('#myModal').modal('show');

};

判断文本框内容是否为空

/**

* 判断字符串是否为空

* @param {Object} str

*/

function isEmpty(str) {

if (str == null || str.trim() == "") {

return true;

}

return false;

};

添加和修改功能---根据value值判断(定义 :0=添加, 1=修改)

//用隐藏域来存储value值,点击模态框的更改提交得按钮时,就根据value值判断执行的功能:添加或修改

/**

* 添加或修改

*/

function addOrUpdate () {

// 得到文本框的值

var name = $("#name").val();

var city = $("#city").val();

var code = $("#code").val();

// 非空判断

if (isEmpty(name) || isEmpty(city) || isEmpty(code)) {

$.alert({

title: '提示!',

content: '内容不能为空!',

});

return;

}

// 得到type的值，判断是添加操作还是修改 0=添加，1=修改

var type = $("#type").val();

if (type == 1) { // 修改

updateData(name,city,code);

} else { // 添加

addData(name,city,code);

}

};