简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

jQuery学习笔记之控制页面实现代码_jquery

WBOY
Release： 2016-05-16 17:55:53
Original
1032 people have browsed it


each()遍历元素（k1）

复制代码 代码如下:

$(document).ready(function () {
$("#btn").html("each()遍历元素").click(function (event) {
$("div").each(function (index) {
$(this).html("这是第" + index + "个div");
});
event.preventDefault();
});
});

获取属性的值（k1）attr(name)
复制代码 代码如下:

$(document).ready(function () {
$("#btn").html("获取属性值").click(function (event) {
$("div").each(function () {
alert("title属性的值是:"+$(this).attr("title"));
});
event.preventDefault();
});
});

设置属性的值（k1）attr(name,value)，attr(name,fn)
eg1
复制代码 代码如下:

$(document).ready(function () {
$("div").each(function () {
$(this).html(this.title);
});
$("#btn").html("设置属性值").click(function (event) {
$("div").each(function () {
$(this).attr("style", "color:Red");
});
event.preventDefault();
});
});

eg2
复制代码 代码如下:

$(document).ready(function () {
$("div").each(function () {
$(this).html(this.title);
});
$("#btn").html("设置属性值").click(function (event) {
$("div").each(function (index) {
$(this).attr("id", function () {
return "div-id" + index;
}).html($(this).attr("id"));
});
event.preventDefault();
});
});

删除属性（k1）removeAttr(name)

设置元素样式
复制代码 代码如下:

addClass(names)，removeClass(names)，toggleClass(names)
$(document).ready(function () {
$("div").each(function () {
$(this).html(this.title).addClass("myClass1").mouseover(function () {
$(this).toggleClass("myClass2");
});
});
});

直接获取，设置样式（k1） css(name)，css(name,value)
复制代码 代码如下:

$(document).ready(function () {
$("div").each(function () {
$(this).html(this.title).css({ color: "Red", opacity: "0.5" }).mouseover(function () {
$(this).css("opacity", "1.0");
}).mouseout(function () {
$(this).css("opacity", "0.5");
});
});
});

判断css类型 hasClass(name) is(name)


处理页面的元素
text()获取纯文本内容 html()获取包括innerHTML属性

移动和复制元素（k2）append()，appendTo(target) 有复制和移动两种形式，单个目标移动，多个目标复制
复制代码 代码如下:

$(document).ready(function () {
$("p").append($("a:eq(0)"));
$("p:eq(1)").append($("a:eq(1)"));
});

添加节点：before()，insertBefore()，after()，insertAfter()
是将元素直接添加到节点之前或之后，不是以子元素插入 有复制和移动两种形式，单个目标移动，多个目标复制

删除元素（k2）
eg1：remove()
复制代码 代码如下:

$(function () {
$("p").remove(":contains(P)");// 等同于$("p:contains("P")").remove();
});

eg2：empty() 注意：empty()与remove()有区别 其中empty()删除其所有子元素
复制代码 代码如下:

$(function () {
$("p").css({border:"1px solid #FF0000",height:"20px"}).empty();
});

克隆元素，解决复制和移动的问题（k3）
复制代码 代码如下:

$(function () {
$("#btn-k3").html("clone()克隆自己并克隆事件").click(function () {
//克隆自己并克隆单击事件(设为true)
$(this).clone(true).insertAfter(this);
});
});

处理表单元素的值（k4）val()
复制代码 代码如下:

$(function () {
$("input[type=button]").click(function () {
var sValue = $(this).val();
$("input[type=text]").val(sValue);
});
});

处理页面事件
绑定事件监听（k5）bind(eventType,[data],Listener)，eventTypeName(fn)，one(eventType,Listener)
复制代码 代码如下:

$(function () {
for (var i = 0; i $("div:last").clone(true).insertAfter($("div:last"));
};
$("div").one("click", function () {
$(this).addClass("myClass1").html("只能点一次");
});
});

删除事件（k5）unbind()，unbind("click")，unbind("click",myFunc)
复制代码 代码如下:

$(function () {
$("div").clone().html("unbind()删除事件").click(function () {
$("div").unbind();
}).insertAfter($("div"));
$("div:first").click(function () {
alert("未删除事件");
});
});

/*jQuery事件对象的属性和方法
altKey 按下Alt键则为true,反之为false
ctrlKey 按下Ctrl则为true,反之为false
keyCode 对于keyup和keydown事件，返回按键的值("A"和"a"得值一样，为65)
page.X,page.Y 鼠标指针在客户端的坐标，不包括工具栏和滚动条等
relatedTarget 鼠标事件中鼠标指针所进入或离开的元素
screenX,screenY 鼠标指针相对于整个计算机屏幕的坐标值
shiftKey 按下shift键则为true,反之为false
target 引起事件的元素/对象
type 事件的名称
which 键盘事件中为按键的Unicode值，鼠标事件中代表按键的值（1为左键，2为中键，3为右键）
stopPropagation() 阻止事件向上冒泡
preventDefault() 阻止事件的默认行为
*/
自动触发事件（k5）trigger(eventType)
复制代码 代码如下:

$(function () {
$("div").click(function () {
alert("单击事件");
});
$(".myClass3").trigger("click");
});

实现单击事件的动态交替（k6）toggle(fn,fn)
复制代码 代码如下:

$(function () {
$("img").attr("title","toggle()实现单击事件的动态交替").toggle(function (event) {
$(event.target).attr("src", "Img/Img2.jpg");
},
function (event) {
$(event.target).attr("src", "Img/Img1.jpg");
});
});

实现感应鼠标（k6）
复制代码 代码如下:

$(function () {
$("img").hover(function (event) {
$(event.target).css("opacity", "1.0");
},
function (event) {
$(event.target).css("opacity", "0.5");
}
);
});

html代码
复制代码 代码如下:

css代码
复制代码 代码如下:

.myClass1{ color:Blue; background:#e58302;}
.myClass2{ color:Red;}
.myClass3{ border:1px solid #FF0000; height:50px; width:80px; float:left;}
Related labels：
控制页面
source：php.cn
Previous article：设置iframe的document.designMode后仅Firefox中其body.innerHTML为br_javascript技巧 Next article：JavaScript高级程序设计 阅读笔记（七） ECMAScript中的语句_javascript技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Best way to preload route data before accessing the route. Before rendering the page for a given route, I want to first get the necessary data synchr...
From 2023-11-17 14:54:42
0
2
379
Nuxt.js SSG (Static Site Generator) Get API Data When building a project using a static site generator, I understand that documentation cre...
From 2023-11-16 21:36:07
0
1
176
How to understand controlled elements in react How to understand controlled elements in react? Use state control? How to understand contr...
From 2023-11-16 14:51:10
0
1
106
<?php //Given a year, month and day, output the day of the year that the date is (note that leap year 4 100 400) <?php //Given a year, month and day, output the day of the year that the date is (no...
From 2023-11-14 23:55:21
0
1
79
Laravel 9.x: Redirect user to view success message after registration I'm trying to return a view with a success message after registering a user, which contain...
From 2023-11-12 22:55:21
0
1
336
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！