$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
代码段2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jquery 点击按钮执行function</title>
</head>
<body>
<div id="name">
名字
</div>
<button id="btn">按钮</button>
<script>
$("#btn").click(function() {
$("#name").hide()
})
</script>
</body>
</html>
jquery语法
$(document).on(“事件名称”,“需要绑定事件的标签 选择器”,function(){需要触发的绑定事件})
$(document).on('click','.classname',function(){});
另外一种写法：
$('#idname').on('click',function(){})
$('.classname').on('click',function(){});
| $("*") | 选取所有元素
| $(this) | 选取当前 HTML 元素
| $("p.intro") | 选取 class 为 intro 的 <p> 元素
| $("p:first") | 选取第一个 <p> 元素
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素
| $("[href]") | 选取带有 href 属性的元素 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 |
使用 jQuery 时，我们能够通过逗号（,）分隔符，实现多个元素的选择。方便我们对多种元素进行同时操作。
$(".class1, .class2, #id1")
jquery事件
$(document).ready(function(){
$("input").change(function(){
alert("文本已被修改");
});
});
<input type="text">
<p>change事件是在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
显示和隐藏语法
语法:
$(selector).hide(speed,callback); //隐藏
$(selector).show(speed,callback); //显示
$("button").click(function(){
$("p").toggle(); //显示和隐藏
});
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容 ("#test").html()
val() - 设置或返回表单字段的值 ("#runoob").attr("href"));
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容 $("p").append("追加文本");
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素（及其子元素） 全部删除被选元素
empty() - 从被选元素中删除子元素 div 包裹元素的话消除里面的元素div保留
$("button").click(function(){
$("#div1").remove();
});
向被选元素添加和删除css样式
jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
查找元素的父元素
parent()
parents()
parentsUntil()
children() 查找子元素
find() 查找所有子元素
$(document).ready(function(){
$("span").parent(); //上面的父元素
});
$(document).ready(function(){
$("span").parents(); //上面所有的父级元素
});
$(document).ready(function() {
$("#name").parent().css({
"background-color": "#eeee"
})
})
限制输入字数
<div><textarea id="remark" placeholder="请输入备注(20字以内)" rows="5" cols="50" class="required"></textarea>
("#remark").val().length);
("#remark").val().length > 20) {
("#remark").val().substring(0, 20));
}
("#remark").val().length);
});
表单验证
// 输入框验证
function check() {
var strText = $("#txt_submit").val();
// 必填项验证
if ("" == strText) {
$("#msg").html("该输入项不能为空");
return false;
}
// 最小长度验证
if (strText.length < 6) {
$("#msg").html("输入长度不能小于6");
return false;
}
// 最大长度验证
if (strText.length > 10) {
$("#msg").html("输入长度不能大于10");
return false;
}
// 汉字验证
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
$("#msg").html("必须输入汉字");
return false;
}
// 错误信息清空
$("#msg").html("");
return true;
}
// 提交时验证
$("#btn_submit").click(check);
// 输入时验证
$("#txt_submit").keyup(check);
// JS代码到此为止
});
网友评论