标签：jQuery function 01 入门 元素 alert input 选择器
jQuery入门
一、jQuery是什么？
jQuery是轻量级的js库(压缩后只有21k) ，兼容各种浏览器。它是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
其宗旨是：
WRITE LESS,DO MORE.
优势：其文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二、jQuery的一个例子
如下代码中，一、二两处均为jQuery的主方法，其中二是一的简写。主方法在所有文件加载完毕后执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入JQuery库 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
/* 一：
$(document).ready(function() {//等待dom元素加载完毕,类似window.onload;
alert("helloworld");
})*/
// 二：
//主方法是所有文件加载完毕才执行的
$(function () {
alert("helloworld");
var uname = document.getElementById("username");
alert(uname);
})
</script>
</head>
<body>
用户名：<input id="username" type="text">
</body>
</html>
三、什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象，是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 中的方法。
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
jQuery对象与DOM对象的转换方法：
$(function () {
//alert("helloworld");
var uname = document.getElementById("username");
alert(uname.value);
//将dom转换为jQuery对象
var unameJq = $(uname);
alert(unameJq.val());
//将jQuery对象转化成dom对象
var unameDom = unameJq[0];
alert(unameDom.value);
//第二种将jQuery对象转为dom对象的方法
var unameDom1 = unameJq.get(0);
alert(unameDom1.value);
})
四、jQuery选择器
在 jQuery 中，对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器，jQuery 选择器的写法更为简洁。
Id选择器
$("#id")等价于document.getElementById(“id”);
元素选择器$("tagName")等价于 document.getElementsByTagName(“tagName”);
1、ID选择器与元素选择器的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入JQuery库 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
/*$(document).ready(function() {//等待dom元素加载完毕,类似window.onload;
alert("helloworld");
})*/
//主方法是所有文件加载完毕才执行的
$(function () {
var unameJq = $("#username");
alert(unameJq.val());
//元素选择器，得到数组
var inputs = $("input");
//在遍历时，使用jQuery的方式
//若用for进行遍历用数组来取，则取到的是dom元素
inputs.each(function () {
alert($(this).val());
})
})
</script>
</head>
<body>
用户名：<input id="username" type="text" value="hola"><br>
密码： <input id="password" type="password" value="123456"><br>
验证码：<input id="cap" type="text" value="654321"><br>
<textarea>
我来自...
</textarea>
</body>
</html>
2、类选择器的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
//主方法是等着整个文档加载完毕才执行的
$(function () {
var divObj = $(".mydiv");
divObj.each(function () {
alert($(this).text()); //遍历每个内部对象的内容
})
})
</script>
<style>
.mydiv{
border: 1px solid blueviolet;
width: 100px;
height: 100px;
}
.mydiv1{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv">我是div1</div>
<div class="mydiv">我是div2</div>
<div class="mydiv1">我是div3</div>
</body>
</html>
3、层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器。
1 、ancestor descendant
用法: $(”form input”) ;
返回值 集合元素
说明: 在给定的祖先元素下匹配所有后代元素。
2、parent > child
用法: $(”form > input”) ;
返回值 集合元素
说明: 在给定的父元素下匹配所有子元素。
注意:要区分后代元素与子元素
3、prev + next
用法: $(”label + input”) ;
返回值 集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素
层次选择器例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
//主方法是等着整个文档加载完毕才执行的
$(function () {
//层级选择器，拿到所有子孙元素
var inputs1 = $("form input")
//只拿子元素
var inputs2 = $("form > input")
//匹配所有跟在label元素后面的input元素
var inputs3 = $("label + input")
inputs3.each(function () {
alert($(this).attr("name"))
})
})
</script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name">
<fieldset>
<label>Newsletter:</label>
<input name="newsletter">
</fieldset>
</form>
<input name="none">
</body>
</html>
4、基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素，该选择器都以 “：” 开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。
1、:first
用法 : $(”tr:first”) ;
返回值：单个元素的组成的集合
说明：匹配找到的第一个元素
2、:last
用法: $(”tr:last”);
返回值 集合元素
说明: 匹配找到的最后一个元素。与 :first 相对应。
3、:not(selector)
用法: $(”input:not(:checked)”);
返回值 集合元素
说明: 去除所有与给定选择器匹配的元素。类似于”非”，意思是没有被选中的input(当input的type=”checkbox”)。
4、:even
用法: $(”tr:even”);
返回值 集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数，js的数组都是从0开始计数的。例如要选择table中的行，因为是从0开始计数，所以table中的第一个tr就为偶数0。
5、: odd
用法: $(”tr:odd”);
返回值 集合元素
说明: 匹配所有索引值为奇数的元素，和:even对应，从 0 开始计数。
基本过滤选择器例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
$("input:checked").each(function () {
alert($(this).val());
})
$("input:not(:checked)").each(function () {
alert($(this).val());
})
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="newsletter" checked="checked" value="basketball" />篮球
<input type="checkbox" name="newsletter" value="football" />足球
<input type="checkbox" name="newsletter" checked="checked" value="pingpang" />乒乓球
</form>
<a href="#" onclick="myclick()">点击</a>
</body>
</html>
5、属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
1、[attribute]
用法: $(”div[id]“) ;
返回值 集合元素
说明: 匹配包含给定属性的元素。例子中是选取了所有带”id”属性的div标签。
2、[attribute=value]
用法: $(”input[name=‘newsletter’]“).attr(”checked”, true);
返回值 集合元素
说明: 匹配给定的属性是某个特定值的元素。例子中选取了所有 name 属性是 newsletter 的 input 元素。
3、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name=‘man’]“)
返回值 集合元素
说明: 复合属性选择器，需要同时满足多个条件时使用。例子中选择的是所有含有 id 属性，并且它的 name 属性是以 man 结尾的元素。
属性过滤选择器例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
$("input[type]").each(function () {
alert($(this).attr("name"));
})
$("input[type='password']").each(function () {
alert($(this).attr("name"));
})
$("input[type][name='mytext']").each(function () {
alert($(this).attr("name"));
})
}
</script>
</head>
<body>
<form>
<input type="text" name="mytext" />
<input type="password" name="mypassword"/>
<input type="radio" name="myradio"/>
<input name="mynotype"/>
</form>
<a href="#" onclick="myclick()">点击</a>
</body>
</html>
6、选择器综合练习
实现输出多选框的选中个数，全选、反选操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
alert($("input:checked").length);
}
function checkall() {
$("input[type='checkbox']").attr("checked","checked");
}
function revchk() {
$("input[type='checkbox']").each(function () {
var inputJq = $(this);
//获得checked这个属性的值
var status = inputJq.attr("checked");
if(status == "checked"){
inputJq.removeAttr("checked");
}else{
inputJq.attr("checked","checked");
}
})
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="newsletter" checked="checked" value="basketball" />篮球<br>
<input type="checkbox" name="newsletter" value="football" />足球<br>
<input type="checkbox" name="newsletter" checked="checked" value="pingpang" />乒乓球<br>
</form>
<a href="#" onclick="myclick()">获得选中的个数</a>
<a href="#" onclick="checkall()">全选</a>
<a href="#" onclick="revchk()">反选</a>
</body>
</html>
五、jQuery中的DOM操作
append所做的工作是剪切，会把原有的元素转移过去。
1、append(content) :向每个匹配的元素的内部的结尾处追加内容
用法：$(’#a’).append(‘content’);
2、appendTo(content)
用法 : $(‘content’).appendTo($(’#a’))
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
function myclick() {
var jqP = $("<p>亲爱的，不要跨过那条江</p>");
$("div").append(jqP);
}
</script>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<a href="#" onclick="myclick()">点击</a>
</body>
</html>
综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function moveRight() {
/*$("#select1 option").each(function () {
var status = $(this).attr("selected");
if(status == "selected"){
//append的元素是剪切
$("#select2").append($(this));
}
})*/
$("#select1 option:selected").appendTo($("#select2"));
}
function moveLeft() {
/*$("#select2 option").each(function () {
var status = $(this).attr("selected");
if(status == "selected"){
//append的元素是剪切
$("#select1").append($(this));
}
})*/
$("#select2 option:selected").appendTo($("#select1"));
}
function moveRightAll() {
$("#select1 option").appendTo($("#select2"));
}
function moveLeftAll() {
$("#select2 option").appendTo($("#select1"));
}
</script>
<style>
select{
width: 120px;
height: 150px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="select1" multiple="multiple">
<option>菜单管理</option>
<option>部门管理</option>
<option>员工管理</option>
<option>库存管理</option>
</select>
</td>
<td>
<input type="button" value=">" onclick="moveRight()"><br>
<input type="button" value=">>" onclick="moveRightAll()"><br>
<input type="button" value="<" onclick="moveLeft()"><br>
<input type="button" value="<<" onclick="moveLeftAll()"><br>
</td>
<td>
<select id="select2" multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
</html>
外部插入节点
after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.
创建节点
创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
注意:
- 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
- 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个
<p>元素, 可以使用$(“<p/>”)或$(“<p></p>”), 但不能使用$(“<p>”)或$(“</P>”)。
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
复制节点
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件
例如：
<button>保存</button>
<p>段落</p>
$("button").click(function(){
alert("点击按钮");
});
//克隆节点，不克隆事件
$("button").clone().appendTo("p");
//克隆节点，克隆事件
$("button").clone(true).appendTo("p");
六、属性操作
attr(): 获取属性和设置属性
- 当为该方法传递一个参数时, 即为某元素的获取指定属性
- 当为该方法传递两个参数时, 即为某元素设置指定属性的值
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), val(), css() 等.
removeAttr(): 删除指定元素的指定属性
七、样式操作
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr()方法来完成.
追加样式: addClass()
移除样式: removeClass() — 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
八、设置获取HTML，文本和值
读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档
读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
读取和设置某个元素中的值: val() — 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组
九、常用的遍历节点方法
取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素的集合:next();
取得匹配元素前面紧邻的同辈元素的集合:prev()
<input type="button" value="查找所有子元素" id="b2"/>
<input type="button" value="获取后面的同辈元素" id="b3"/>
<input type="button" value="获取前面的同辈元素" id="b4"/>
十、事件
提供可以绑定的事件有：
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。
标签：jQuery,function,01,入门,元素,alert,input,选择器 来源： https://blog.csdn.net/qq_43618583/article/details/113445387
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。