jQuery练习
2021-05-30 13:01
标签：oct col 问题 方法 之间 页面 对象 练习 style 需求:点击按钮，显示文本和隐藏文本 jQuery练习 标签：oct col 问题 方法 之间 页面 对象 练习 style 原文地址：https://www.cnblogs.com/k38-19/p/14672907.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>jQuery 入门title>
script src="/static/jQuery-1.11/jquery-1.11.3.min.js">script>
script>
$ (function() {
$(‘#btn‘).click(function () {
/*toggle 是表示求和时间*/
$(‘#content‘).toggle(1000)
});
});
script>
head>
body>
div id="content" >等我工作了一定会个好的笔记本 等我工作了一定会个好的笔记本
等我工作了一定会个好的笔记本 等我工作了一定会个好的笔记本div>
button id="btn">切换button>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>jQuery 入门title>
script src="/static/jQuery-1.11/jquery-1.11.3.min.js">script>
head>
body>
button id="btn">按钮button>
script>
//btn 存的是个dom 对象
var btn = document.getElementById("btn");
console.log(btn);
//$btn 存的就是一个jQuery对象
var $btn = $(‘#btn‘);
console.log($btn);
console.log(‘------------------------------------‘);
//DOM 对象转JQuery对象 这个用在事件处理函数里
console.log($(btn));
//本质jQuery 作者提供一个函数给我们使用 函数 是$
function $() {
/*
* 底层做判断
* 比如传的是一个字符串 ,找页面元素封装一个 jQuery 对象返回
* 比如传的是一个DOM对象 包裹成一个jQuery对象返回
* 比如传的是一个函数 找到 window对象 给对象 onload 绑定这个传过来的函数
* */
}
/*
* $(‘#btn‘)字符串
* $(btn) DOM对象
* $(function() {} ) 函数
* */
script>
body>
html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
title>jQuery 常用方法title>
script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
script>
script>
window.onload= function () {
// 问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
console.log($(‘p‘).size);
//问题 2：获取 id 为 username 元素的 value 属性值
console.log($(‘#username‘).val() );
//问题 3：设置 id 为 username 元素的 value 属性值为"叩丁狼教育"
console.log($(‘#username‘));
//设置的时候返回的就是被修改的元素 一个jQuery对象
$(‘#username‘).val(‘咖啡‘);
//题 4：对比 h1 元素的内容和纯文本的区别
console.log($(‘#h1‘).html());
console.log($(‘#h1‘).text());
$(‘#h1‘).html(‘我想喝咖啡!!‘);
//问题 5：把 h1 元素内容的颜色改为绿色
$(‘#h1‘).css(‘color‘ , ‘brown‘);
}
script>
head>
body>
h1 id="h1">做人i>要低调i>h1>
input type="text" id="username" value="wolfcode"/>br/>br/>
div>
jQuery 常用方法:br/>
jQuery对象.size(); // 获取 jQuery 中包含元素的个数br/>
jQuery对象.val(); // 操作元素的 value 属性br/>
jQuery对象.html(); // 操作元素内的 HTML 代码br/>
jQuery对象.text(); // 操作元素内的文本，忽略 HTML 标签br/>
jQuery对象.css(); // 操作元素的 style 属性
div>
hr/>
div>
p>
问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
p>
p>
问题 2：获取 id 为 username 元素的 value 属性值
p>
p>
问题 3：设置 id 为 username 元素的 value 属性值为"叩丁狼教育"
p>
p>问题 4：对比 h1 元素的内容和纯文本的区别
p>
p>
问题 5：把 h1 元素内容的颜色改为黄色
p>
div>
body>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
title>jQuery 常用选择器title>
script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
script>
style type="text/css"> .selected{background-color: gray;}style>
script>
window.onload= function () {
//问题 1：获取 id 为 msg 的元素的内容
console.log($("#msg").html());
//问题 2：获取所有的 li 元素并打印数量
console.log($(‘li‘).size());
//问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red
//找到多少改多少
$(‘.selected‘).css(‘color‘ ,‘red‘);
//, 是or的意思
console.log($(‘li,#msg‘).size());
//不要 , 号 是 and 意思
console.log($(‘li#msg‘).size());
}
script>
head>
body>
div id="msg">使用 ID 选择器获取当前 DIV元素div>
ul>
li>item1li>
li>item2li>
li>item3li>
li>item4li>
ul>
ul id="myul">
li>item1li>
li class="selected">item2li>
li>item3li>
li class="selected">item4li>
ul>
hr/>
div>
p>
问题 1：获取 id 为 msg 的元素的内容
p>
p>
问题 2：获取所有的 li 元素并打印数量
p>
p>
问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red
p>
div>
body>
html>