JQuery基础

最新推荐文章于 2023-06-11 13:49:24 发布

猫吻鱼

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量204

点赞数 1

分类专栏： # 前端

本文链接：https://blog.csdn.net/qq_36882793/article/details/86478503

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下：内容主要来源菜鸟教程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是可以响应的。

猫吻鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery基础

JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action()“$“ 定义 jQuery,选择符（selector）“查询&amp;quot;和&amp;quot;查找” HTML 元素jQuery 的 action() 执行对元素的操作1. 基础格式: ready是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以...
复制链接

扫一扫