初步学习jquery学习笔记(四)
Jquery HTML
Jquery 捕获内容
什么是dom?
DOM = Document Object Model(文档对象模型)
获取内容
- text()获取所选元素的文本内容
- html()获取所选元素文本标记(包括标签)
- val()获取表单字段的值
html代码
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示 值</button>
操作代码
$(document).ready(function(){
$("#btn1").click(function(){
alert("Test:"+$("#test").text());
});
$("#btn2").click(function(){
alert("Test:"+$("#test").html());
});
$("#btn3").click(function(){
alert("值为: " + $("#test").val());
});
});
获取属性 - attr()
获取对应指定属性的值
<p><a href="http://www.baidu.com" id="baidu">百度</a></p>
<button>显示 href 属性的值</button>
$(document).ready(function(){
$("button").click(function(){
alert($("#baidu").attr("href"));
})
});
Jquery 设置节点的值
设置内容
- text()设置所选元素的文本内容
- html()设置所选元素文本标记(包括标签)
- val()设置表单字段的值
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="输入框3"></p><!--表单-->
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("你好!");
});
$("#btn2").click(function(){
$("#test2").html("世界!");
});
$("#btn3").click(function(){
$("#test3").val("哈喽!");
});
});
text()、html() 以及 val() 的回调函数
回调函数包括两个值
- 元素列表中当前元素的下标
- 元素原始的值
$("#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 + ")";
});
});
设置属性 - attr()
改变单个属性
<p><a href="https://www.sina.com.cn/" id="sina">新浪</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后,可以点击链接查看链接地址是否变化。</p>
$(document).ready(function(){
$("button").click(function(){
$("#sina").attr("href","http://www.baidu.com")
});
});
改变多个属性
$("button").click(function(){
$("#test").attr({
"href" : "http://www.baidu.com",
"title" : "百度"
});
});
回调函数
回调函数
两个参数:
- 列表元素当前下标
- 原始的值
$("button").click(function(){
$("#test").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
添加元素
append() - 在被选元素的结尾插入内容
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<li>追加列表项</li>");
});
});
prepend() - 在被选元素的开头插入内容
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
after() - 在被选元素之后插入内容
$("img").after("在后面添加文本");
before() - 在被选元素之前插入内容
$("img").before("在前面添加文本");
删除元素
jQuery remove() 方法
删除所选元素和子元素
$("#div").remove();
jQuery empty() 方法
删除所选元素的子元素
$("#div").empty();
移除指定的元素
$("#div").remove(".test");//删除子元素中的test类
操作css
添加class属性
向不同的元素添加 class 属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
删除class属性
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
添加属性/删除属性切换
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery css() 方法
返回css属性的值
$("p").css("background-color");
设置 CSS 属性
$("p").css("background-color","yellow");
设置多个css属性
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸
width()
设置或者返回元素的宽度
$('#div1').width();
height()
设置或者返回元素的高度
$('#div1').height();
innerWidth()
返回元素的宽度(包括内边距)
$('#div1').innerWidth();
innerHeight()
返回元素的高度(包括内边距)
$('#div1').innerHeight();
outerWidth()
返回元素的宽度(包括内边距和边距)
$('#div1').outerWidth();
outerHeight()
返回元素的高度(包括内边距和外边距)
$('#div1').outerHeight();
初步学习jquery学习笔记(四)的更多相关文章
- 初步学习jquery学习笔记(三)
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- 初步学习jquery学习笔记(六)
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
- 初步学习jquery学习笔记(五)
jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...
- 初步学习jquery学习笔记(一)
什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...
- 初步学习jquery学习笔记(二)
jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...
- Vue学习计划基础笔记(四) - 事件处理
事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的 ...
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- jquery学习笔记(四):动画
内容来自[汇智网]jquery学习课程 4.1 显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).h ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
随机推荐
- python环境下安装opencv库的方法
注意:安装opencv之前需要先安装numpy,matplotlib等 一.安装方法 方法一.在线安装 1.先安装opencv-python pip install opencv-python --u ...
- HDU 3480 Division DP斜率优化
解题思路 第一步显然是将原数组排序嘛--然后分成一些不相交的子集,这样显然最小.重点是怎么分. 首先,我们写出一个最暴力的\(DP\): 我们令$F[ i ][ j ] $ 为到第\(i\)位,分成\ ...
- python 随机数详细使用,推到以及字符串,双色球小程序
#随机数的使用import random #导入randomrandom.randint(0,9)#制定随机数0到9i=random.sample(range(1,34),6)#输出6个随机数,范围是 ...
- Zookeeper基础命令操作
转载链接:https://blog.csdn.net/dandandeshangni/article/details/80558383 安装参考链接https://blog.csdn.net/qiun ...
- C++入门经典-例2.15-逗号表达式的应用
1:代码如下: // 2.15.cpp : 定义控制台应用程序的入口点. #include "stdafx.h" #include<iostream> using na ...
- jenkins入门-----(1)安装、配置
Jenkins概念 Jenkins是一个开源的.可扩展的持续集成.交付.部署(软件/代码的编译.打包.部署)的基于web界面的平台.允许持续集成和持续交付项目,无论用的是什么平台,可以处理任何类型的构 ...
- eclipse subclipse svn 插件安装使用
一.在线安装 1.打开Eclipse,菜单栏中选择"Help"->"Install New SoftWare..." 2.在弹出的对话框中,点击" ...
- Node.js读取文件相对路径写法注意
首先看一下文件的存放结构: 我们现在希望在上面标记的JS文件里面读取html里面的内容,我们的代码如下: var fs=require("fs"); fs.readFile('te ...
- Win10卸载预装应用
Win10的预装应用大多数都比较鸡肋,没啥用,喜欢纯净的系统的朋友可以将其卸载掉. 1.以管理员身份启动powershell,键入命令[Get-AppxPackage | Select Name, P ...
- webservice wsdl地址
天气预报Web服务,数据来源于中国气象局公用事业Endpoint:http://www.webxml.com.cn/WebServices/WeatherWebService.asmxDisco:ht ...