以下:内容主要来源菜鸟教程http://www.runoob.com/jquery/jquery-traversing.html 和哪我忘了,另外,写到一半觉着JQuery属性太多了,自己想起来之前怎么写的了,就任性的不写了(哈哈哈)。 内容仅用于自我记录学习使用。如有错误,欢迎指正。
JQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
- “$“ 定义 jQuery,
- 选择符(selector)“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
1. 基础格式: ready是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
$(document).ready(function(){
// 开始写 jQuery 代码...
});
// 简洁写法
$(function(){
// 开始写 jQuery 代码...
});
-
元素选择器 : # 选择id, . 选择class
$(“p”) : 选择所有p标签
2.事件
$("p").click(function(){
// 动作触发后执行的代码!!
});
- click(单击), focus(获得焦点),blur(失去焦点),hover(鼠标悬停)
- unload(用户离开页面时,比如点击链接跳转、点击前进后退按钮,重新加载页面,关闭浏览器窗口等会触发, 1.8版本被废弃,3.0被移除)
- hide()/show()(隐藏或者显示)/ toggle()(隐藏和显示两种状态互相切换)
$("p").hide(1000,‘linear’, callback); // 1000毫秒后以linear动画消失并执行回调函数callback
3. JQuery 获取/设置内容: text()、html() 以及 val();获取/设置属性 attr()
1. 获取/设置内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
注: 设置内容时: 回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
// 获取内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
// 设置内容
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
2. 获取属性
// 获取属性
var href = $("#button").attr('href'); // 会返回id为button的标签的href属性值
// 设置属性
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
`// 设置多个属性
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
// 回调函数方式
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
注:
prop()函数的结果:
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是undefined。
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()
4. JQuery 添加 / 删除元素:
1. 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
注:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加
2. 删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
剩下的,太多了,不想写了,大致想起来JQuery的用法了,具体实际使用时再查询吧(迷之任性)。。。。。。任性如我,告辞。
附带一个JQuery中文Api网址: http://jquery.cuishifeng.cn/
以及,自己写着一个小Demo
JS页面动态加载Html页面Demo:
Html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/one.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script>
$(function() {
// one.js初始化
one.init();
});
</script>
<body>
<div id="main">
</div>
</body>
</html>
one.js代码
var one = {
// 初始化
init:function(){
var main = document.getElementById("main");
main.innerHTML = one.build_content();
},
// 添加内容
build_content: function() {
var attr = [];
attr.push("<h1 id = 'h1' >h1测试</h1><br/>");
attr.push("<h2 id = 'h2' onclick = 'one.events.h2click(this.innerHTML)'>h2测试点击</h2>");
attr.push("<div id = 'content'><div></div><br/><div></div></div>");
return attr.join(""); // 将字符数组拼接成字符串,以"" 作为间隔
},
events: {
// h2 点击事件,点击后会给
h2click: function(content) {
alert("点击了h2 " + content + " 同时绑定了h1的click事件");
one.events.bind_h1_click();
var childs = $("#content").children();
// dom对象转Jquery --- $firstchild = $(childs[0])
var $firstchild = $(childs[0]);
$firstchild.html("<a href='https://www.baidu.com'>百度 " + $("#h1").html() + "</a>");
// Jquery 转dom -- $("#h1")[0] 或者 $("#h1").get(0);
childs[2].innerHTML = "<a href='https://www.sougou.com'>搜狗 " + $("#h1")[0].innerHTML + "</a>"
},
// 绑定h1 点击事件
bind_h1_click:function(){
// unbind 取消之前的h2click点击事件,重新绑定点击事件
$("#h1").unbind("click");
$("#h1").bind("click", function(){
alert($(this).html());
alert($(this).text());
})
}
}
}
刚开始运行渲染的页面
点击h2后渲染的页面:
注意:这里当点击h2后对h1绑定了点击事件,点击h1是可以响应的。