一.jQuery的优点
（1）提供了强大的功能函数 （2）解决浏览器兼容性问题 （3）实现丰富的 UI 和插件 （4）纠正错误的脚本知识
二.jQuery的核心
1.用法
2.核心
三.DOM 对象和 jQuery 包装集对象
1.dom对象
代码示例:
<body>
<div id="mydiv"></div>
</body>
/*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...")
代码示例:
<body>
<div id="div1" class="test">div2</div>
<div id="div1">div1</div>
<div class="test">div3</div>
<div>div4</div>
<p class="test">这是一个P</p>
<span class="test">这是一个span</span>
</body>
<script type="text/javascript">
// 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);
</script>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 选择每个相隔的（偶数） 元素
<body>
爱好:<input type="checkbox" name="ufav" value="篮球" checked="checked"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码" checked="checked"/>代码
<input type="checkbox" name="ufav" value="爬床1"/>爬床1
<input type="checkbox" name="ufav" value="代码1" checked="checked"/>代码1<br />
</body>
<script type="text/javascript">
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);
});
</script> 五.操作元素的属性
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) 移除样式名称
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script type="text/javascript">
/* 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"})
</script>七.操作元素的内容
1.获取元素的内容
1. html() 获取元素的html内容 2.text() 获取元素的文本内容，不包含<html>标签 3.val() 获取元素value值
2.设置元素的内容
1. html("html,内容") 设定元素的html内容 2.text("text 内容") 设置元素的文本内容，不包含<html>标签 3.val(‘值’) 设定元素的value值
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<div id="getHtml" >
这是一个Div
<span>span标签</span>
<p>这是P</p>
</div>
</body>
<script type="text/javascript">
// 设置（非表单）元素的内容
// 包含的html标签
$("#html").html("<h3>上海</h3>");
// $("#html").html("上海");
// 不包含html标签,只能设置纯文本
$("#text").text("<h3>上海</h3>");
$("#text").text("上海");
// 设置表单元素的值
$("input").val("Hello");
// 获取元素的值
console.log($("#getHtml").html());
console.log($("#getHtml").text());
console.log($("input").val());
</script>八.添加元素
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);
<div id="parent">
<span class="red">男神</span>
<span class="blue">偶像</span>
</div>
<div class="green" id="xxr">
<span >小鲜肉</span>
</div>
<script type="text/javascript">
// 父元素
var parent = $("#parent");
// 要追加的内容
var span = $('<span class="pink">女神</span>');
// 前追加 （追加的都是子元素）
// prepend(content)
parent.prepend(span);
// $(content).prependTo(selector)
$(".blue").prependTo(parent);
// 后追加（追加的都是子元素）
var singer = '<span class="green">歌手</span>';
// append(content)
// parent.append(singer);
// $(content).appendTo(selector)
$(singer).appendTo(parent);
// 插入同级元素
// $(selector).before(content)
$("#xxr").before("<div class='blue'><span>小奶狗</span></div>");
// $(selector).after(content)
$("#xxr").after("<div class='red'><span>老腊肉</span></div>");
</script>九.删除元素
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。empty() 清空所选元素的内容
十.遍历元素
each() $(selector).each(function(index,element)) :遍历元素 参数 function 为遍历时的回调函数， index 为遍历元素的序列号，从 0 开始。 element是当前的元素，此时是dom元素。
<body>
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
</body>
<script type="text/javascript">
$(".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());//获取元素的内容,结果同上;
});
</script>十一:jquery事件
1.ready()加载事件 ready()类似于 onLoad()事件 ready()可以写多个，按顺序执行 $(document).ready(function(){})等价于$(function(){}) onload与ready()的区别： 1、ready()在DOM结构解析完毕后即执行 2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行
绑定事件示例:
<body>
<!--button元素，默认是提交按钮-->
<button type="button" id="btn">按钮</button>
<input type="text" id="txt" value="Hello Jquery" />
</body>
<!--
分析步骤:
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
-->
<script>
// 直接绑定事件
$("#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");
}
});
</script>十二:文章最后用一个例子来结束今天jquery的学习
案例:---表格的增删改查
现在有一个表格,我有省份名称,城市名称,邮编,操作4个字段,
默认有三行数据,操作单元格内有修改和删除按钮;
需求:
1.点击删除,弹出对话框,询问用户是否确认删除,确认删除就删除选中这行的记录,且对话框中有确认和取消按钮;
2.给表格添加一个添加按钮,可以添加记录,点击添加按钮弹出模态框并显示三个文本框分别填写以上的三个字段,填写完成,自动关闭模态框;
3.点击修改按钮,同样弹出同一个模态框,修改内容后,点击模态框的提交更改按钮就ok;
1.头部,引入核心文件
<head>
<meta charset="UTF-8">
<title>表格的增删改查</title>
<!--bootStrap核心css文件-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<!--Jquery核心js文件-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<!--bootStrap核心js文件-->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!--jquery-confirm文件-->
<link rel="stylesheet" href="jquery-confirm/jquery-confirm.css" />
<script src="jquery-confirm/jquery-confirm.js" type="text/javascript" charset="utf-8"></script>
</head>2.<body>中的内容
//<!-- 按钮触发模态框 -->
<div class="container"> //bootstrap的属性直接引用
// <!--添加按钮绑定了打开模态框，设置两个属性data-toggle="modal" data-target="#myModal"，myModal是模态框的div的id值-->
<button class="btn btn-primary btn-lg btn-success" data-toggle="modal" data-target="#myModal" >添加</button> <br/>
//表格 引用的bootstrap的样式
<table id="mytable" style="width: 800px;" align="center" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th style="text-align: center;">省份名称</th>
<th style="text-align: center;">城市</th>
<th style="text-align: center;">邮编</th>
<th style="text-align: center;">操作</th>
</tr>
</thead>
<tbody>
<tr id="tr_1">
<td>上海</td>
<td>浦东</td>
<td>66666</td>
<td>
<button class="btn btn-xs btn-warning" onclick="openDialog(this,1)">修改</button>
<button class="btn btn-xs btn-danger" onclick="deleteTr(this)">删除</button>
</td>
</tr>
<tr id="tr_2">
<td>江苏</td>
<td>如皋</td>
<td>226534</td>
<td>
<button class="btn btn-xs btn-warning" onclick="openDialog(this,2)">修改</button>
<button class="btn btn-xs btn-danger" onclick="deleteTr(this)">删除</button>
</td>
</tr>
<tr id="tr_3">
<td>江苏</td>
<td>苏州</td>
<td>226500</td>
<td>
<button class="btn btn-xs btn-warning" onclick="openDialog(this,3)">修改</button> //修改按钮
<button class="btn btn-xs btn-danger" onclick="deleteTr(this)">删除</button> //删除按钮
</td>
</tr>
</tbody>
</table>
</div><body>中引入模态框:
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加内容</h4>
</div>
<div class="modal-body">
// <!--引用的bootstrap表单的属性-->
<div class="form-group">
<label for="name">省份</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="city">名称</label>
<input type="text" class="form-control" id="city" placeholder="请输入城市">
</div>
<div class="form-group">
<label for="code">名称</label>
<input type="text" class="form-control" id="code" placeholder="请输入邮编">
</div>
<!--点击添加的时,文本框内没有内容,就设置值为空-->
<input type="hidden" id="type" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="addOrUpdate()">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div><script>中删除功能
点击修改按钮执行删除功能
//定义主键
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>";
tr += "<td>"+name+"</td>";
tr += "<td>"+city+"</td>";
tr += "<td>"+code+"</td>";
tr +="<td>";
tr +=" <button class='btn btn-xs btn-warning' onclick='openDialog(this)'>修改</button>";
tr +=' <button class="btn btn-xs btn-danger" onclick="deleteTr(this)">删除</button>';
tr +="</td></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=修改)
<!--点击添加的时,文本框内没有内容,就设置值为空-->
<input type="hidden" id="type" value=""/> //用隐藏域来存储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);
}
};
4063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
