JavaScript学习笔记8-jQuery入门介绍、css选择器复习

最新推荐文章于 2022-04-27 00:57:28 发布
原创 最新推荐文章于 2022-04-27 00:57:28 发布 · 539 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了使用jQuery简化DOM操作的方法，包括元素样式修改、表格行背景颜色交替设置及获取表单中复选框的选择数量。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

 </head>

 <body>

 <a>click me</a>

 <script type="text/javascript">

 if(document.getElementById("hello"))
 {
	document.getElementById("hello").style.color = "red";
 }

 </script>
  
 </body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript" src="jquery-1.4.4.js"></script>

 </head>

 <body>
  
  <a id="hello" style="color:blue">click me</a>

  <script type="text/javascript">

  //alert($("#hello").css("color"));     读
  //alert($("#hello").css("color", "red"));  写
  
  
  //如果此时 删去a的id属性 
  //alert($("#hello"))那么返回object对象
  //alert($("#hello")[0]); 返回空
  alert($("#hello").get(0));

  </script>


 </body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">
/*
  window.onload = function()
  {
	var myTable = document.getElementById("table1");
    var myTBody = myTable.getElementsByTagName("tbody")[0];
    var myTrs = myTBody.getElementsByTagName("tr");

	for(var i = 0; i < myTrs.length; i++)
	{
		if(i % 2 == 0)
		{
			myTrs[i].style.backgroundColor = "red";
		}
		else
		{
			myTrs[i].style.backgroundColor = "blue";
		}
	}  
  }
*/
  $(function()
  {
	$("#table1 tbody tr:even").css('background', 'red');
	$("#table1 tbody tr:odd").css('background', 'blue');
  });

  </script>
  

 </head>

 <body>
  
<table id="table1" border="1" align="center" width="80%">

<tbody>
  <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>
  <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>
  <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>
  <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>
  <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>
  <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>
  <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>
  <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>
  <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr>
  <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>
  <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>
  <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>
  <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>
  <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>
  <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>
  <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>
  <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>
  <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr>
  <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>
  <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>
  <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>
  <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>
  <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>
  <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>
  <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>
  <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>
  <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr>
</tbody>

</table>


 </body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">
  /*
  window.onload = function()
  {
	var btn = document.getElementById("myButton");
	
	btn.onclick = function()
	{
		var count = 0;

		var checkboxs = document.getElementsByName("myCheck");

		for(var i = 0; i < checkboxs.length; i++)
		{
			if(checkboxs[i].checked)
			{
				count++;
			}
		}

		alert("number: " + count);
	}
  }
*/

$(function()
{
	$("#myButton").click(function()
	{
		alert("选中个数： " + $('input[name="myCheck"]:checked').length);
	});
});

  </script>



 </head>

 <body>
  
 <input type="checkbox" name="myCheck" checked="checked">
 <input type="checkbox" name="myCheck">
 <input type="checkbox" name="myCheck" checked="checked">
 <input type="checkbox" name="myCheck">
 <input type="checkbox" name="myCheck">
 <br><br>
 <input type="button" value="click me" id="myButton">


 </body>
</html>

CSS 选择器（复习）




其中类选择器应用最多，如果“.”前面没有元素，则表示应用到当前页面里所有id为dream的元素。如果前面有元素，则表示应用到 元素名为“div” id为“note”的元素上。


JavaScript框架-jQuery学习笔记
lskj的博客
07-08 903
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果时复合属性则必须采用驼峰命名法。其余参数都可以省略speed：三种预定速度之一的字符串（“slow”，“normal”，”fast“）或表示动画时长的毫秒数值（如：1000）easing：（Optional）用来指定切换效果，默认是”swing“，可用参数”linear“fn：回调函数，在动画完成时执行的函数，每个元素执行一次用户自己给元素添加的属性，称为自定义属性。获取属性。
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
12-10
CSS3充分吸收多年了web发展的需求，吸收...jQuery通过预先的javascript编程，提供了几乎所有css3标准下的选择器。开发者可以利用这些选择器轻松选择各种元素。供javascript编程使用。 代码如下: <script type=”tex
前端基础--css基本语法,选择器
weixin_30569153的博客
01-25 232
一.css概述 　　CSS（CascadingStyleSheet)层叠样式表,定义如何显示HTML元素，给HTML设置样式，让它更加美观。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 　　CSS创建于1996年,在1997年W3C颁布HTML4.0与XHTML1.0时同时公布了CSS1标准.1998年推出了CSS2标准,目前仍不断发展和完善中 二.css语法...
下列html标签没有语法错误的是,HTML+JS试题一.docx
weixin_42515376的博客
07-19 357
HTMLJS试题一中软 考试试卷 HTML+JS试题一 考试时间： 60 分钟 2017年 1月在HTML中,表示页面背景的是(A ) HTML中,表示(C)正在点击文字的色彩是红色。可可链接文字的色彩是红色。非可链接文字的色彩是红色。已链接文字的色彩是红色。 下列表示，可链接文字的颜色是黑色的是(A) 下列表示，已经点击(访问)过的可链接文字的的颜色是黑色的是(C) 下列表示，正被点击的...
jQuery练习题及答案
热门推荐
weixin_40693633的博客
07-03 8万+
一．选择题1. 下面哪种不是jquery的选择器?(  )  C。A、基本选择器                          B、层次选择器C、css选择器                                   D、表单选择器2. 当DOM加载完成后要执行的函数，下面哪个是正确的?(  )  CA、jQuery(expression, [context])  B、jQuery...
jQuery题库
qq_43493141的博客
12-27 1万+
一．选择题 下面哪种不是jquery的选择器?( ) C。 A、基本选择器 B、层次选择器 C、css选择器 D、表单选择器 当DOM加载完成后要执行的函数，下面哪个是正确的?( ) C A、jQuery(expression, [context]) B、jQue...
jquery设置css样式、style属性 示例
u013521540的博客
12-01 3944
[size=medium]css虽然会在一开始我们就定义好了，但是有很多场景需要我们动态设置css，或者单独修改一个dom控件的style属性，今天分享一下我总结的jquery设置css及style样式的方法。 一、CSS 1、css(name) 访问第一个匹配元素的样式属性。 返回值 String 参数 name (String) : 要访问的属性名称 示例： $(...
JavaScript学习笔记8-jQuery基本过滤选择器深度解析
hellochenlu的博客
09-12 565
过滤选择器 （filter） –基本过滤 –内容过滤 –可见性过滤 –属性过滤 –子元素过滤 –表单对象属性过滤 基本过滤选择器 New Document $(document).ready(function() { $("#button1").click(function() {
JavaScript学习笔记8-jQuery基本选择器深度解析
hellochenlu的博客
09-12 378
jQuery选择器的分类 –基本选择器 （basic） –层次选择器 （level） –过滤选择器 （filter） –表单选择器 （form） 基本选择器 （basic） 1）$(“#id”)，根据id值找到匹配的元素，最多只返回一个元素（如果该元素存在），如果不存在，则返回一个空的jQuery对象。 2）$(“.class”)，根据css的clas
Web前端开发学习笔记12-- jQuery 基础
FFFde博客
04-27 621
1、jQuery 基本使用 2、jQuery 常用 API 2.1 jQuery 选择器 2.1.1 jQuery 基础选择器 2.1.2 jQuery 筛选选择器 2.1.3 jQuery 筛选方法 2.2 jQuery 样式选择 2.3 jQuery 效果 2.4 jQuery 属性操作 2.5 jQuery 内容文本值 2.6 jQuery 元素操作 2.7 jQuery 尺寸、位置操作 3、jQuery 事件 3.1 jQuery 事件注册、事件处理 3.2 jQuery 事件对象 4、jQuery
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
通过以上介绍，我们可以看到jQuery在选择器、样式操作和效果方面的强大功能。使用jQuery，开发者可以编写出简洁、高效的代码，同时避免了不同浏览器之间的兼容性问题。对于初学者来说，掌握这些基础知识是快速提升...
JQuery 学习笔记 选择器之二
12-10
结合CSS选择器的特性，jQuery的选择器系统使得开发者可以精确地定位和操作页面上的任何元素，从而实现丰富的交互效果和动态更新。 总的来说，jQuery选择器是其强大功能的核心之一，通过熟练掌握和灵活运用这些选择...
$.cookie is not a function;原因及解决办法
hellochenlu的博客
04-14 3万+
一、没有引入jQuery库文件 二、jQuery库文件和jquery.cookie.js文件的顺序问题。须先引入jQuery库文件再引入cookie插件文件 三、页面的加载顺序所导致 大家的问题大多出在第三个原因！ 网上有人说是一个页面由于二次或多次引入了jquery插件导致。 我觉得应该这样总结： 火狐浏览器报错$.cookie is not a func
nodejs爬虫简易实现和jquery的each方法
hellochenlu的博客
09-23 2095
var http = require('http'); var cheerio = require('cheerio'); var url = 'http://blog.csdn.net/hellochenlu'; http.get(url, function(res){ var html = '' res.on('data', function(data){ //console.l
JavaScript学习笔记8-jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
hellochenlu的博客
09-10 582
jQuery的口号是：write less, do more // ready方法的作用是当页面中的dom加载完毕后执行参数中的函数 $(document).ready(function() { alert("Hello World"); }); jquery $(document).ready() 与window.onload的区别 这两个方法的效果都
JavaScript学习笔记8-jQuery表单对象属性过滤
hellochenlu的博客
09-14 472
表单对象属性过滤 （注意冒号后面的空格） $(function() { $("#button1").click(function() { $("#form1 input:not(.test):enabled").val("hello world"); }); $("#button2").click(function() { $
JavaScript学习笔记8-jQuery层次选择器深度解析
hellochenlu的博客
09-12 450
层次选择器 $(document).ready(function() { $("#button1").click(function() { $('body div').css("background", "red"); }); $("#button2").click(function() { $('body > div')
JavaScript学习笔记8-jQuery表单选择器
hellochenlu的博客
09-14 438
表单选择器 $(function() { //alert($('#form1 :text').length); //alert($('#form1 :password').length); //alert($('#form1 :radio').length); //alert($('#form1 :checkbox').length); //a
JQuery入门教程：选择器、CSS操作与节点关系解析
这篇学习笔记主要介绍了jQuery的基础知识，包括jQuery的理解、jQuery对象与DOM对象的转换、选择器的使用、CSS样式的操作以及节点关系的处理。以下是详细内容： 一、jQuery了解 1. 原生JavaScript的问题：在...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值