初识jquery

最新推荐文章于 2021-12-05 22:20:42 发布

Evewyf

最新推荐文章于 2021-12-05 22:20:42 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/qq_45393105/article/details/101308856

版权

jquery的学习笔记

一.标签选择器

常用的标签选择器（基本）：

#id

  概述：根据给定的ID匹配一个元素。
      如果选择器中包含特殊字符，可以用两个斜杠转义。
  参数：id
      用于搜索的，通过元素的 id 属性中给定的值
  示例
      查找 ID 为"myDiv"的元素。
   HTML 代码:
     <div id="notMe"><p>id="notMe"</p></div>
     <div id="myDiv">id="myDiv"</div>
   jQuery 代码:
     $("#myDiv");结果:
     [ <div id="myDiv">id="myDiv"</div> ]

element

  概述：根据给定的元素名匹配所有元素
  参数：element
        一个用于搜索的元素。指向 DOM 节点的标签名。
  示例
      查找一个 DIV 元素。
      HTML 代码:
      <div>DIV1</div>
      <div>DIV2</div>
      <span>SPAN</span>jQuery 代码:
  $("div");结果:
      [ <div>DIV1</div>, <div>DIV2</div> ]

.class

  概述：根据给定的类匹配元素。
  参数：class 
       一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
  示例
      查找所有类是 "myClass" 的元素.
      HTML 代码:
      <div class="notMe">div class="notMe"</div>
      <div class="myClass">div class="myClass"</div>
      <span class="myClass">span class="myClass"</span>
  jQuery 代码:
  $(".myClass");结果:
      [ <div class="myClass">div class="myClass"</div>, <span class

常用的标签选择器（层级）：

parent > child

概述：在给定的父元素下匹配所有的子元素

参数：parent 任何有效选择器

child用以匹配元素的选择器，并且它是第一个选择器的子元素

示例：

匹配表单中所有的子级input元素。
HTML 代码:
< form >
< label >Name:< /label >
< input name=“name” />
< fieldset>
< label>Newsletter:
< input name=“newsletter” />
< /fieldset>
< /form>
< input name=“none” />
jQuery 代码:
$(“form > input”)结果:
[ < input name=“name” />

表单：

:input
概述
匹配所有 input, textarea, select 和 button 元素

示例
查找所有的input元素，下面这些元素都会被匹配到。

HTML 代码:

<input type="file" />
<input type="hidden" />
<input type="image" />

<input type="password" />
<input type="radio" />
<input type="reset" />

<input type="submit" />
<input type="text" />
<select><option>Option</option></select>

<textarea></textarea>
<button>Button</button>

jQuery 代码: $(":input")结果: [ , ,

<input type="file" />,
<input type="hidden" />,
<input type="image" />,

<input type="password" />,
<input type="radio" />,
<input type="reset" />,

<input type="submit" />,
<input type="text" />,
<select><option>Option</option></select>,

<textarea></textarea>,
<button>Button</button>,
]

实际案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单的添加</title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	</head>
	<body>
		<form action="#">
		<ul>
			<li>苹果</li>
		    <li>香蕉</li>
		    <li>橘子</li>
		</ul>
		<input type="text" /><input type="button"  value="添加"/><br  /><br />
		<script type="text/javascript">
		$("li").live("click",function(){
			alert($(this).html());
		});
		$(":button").first().click(function(){
			$("ul:first").append($("<li>").html($(":text").val()))
		});
		</script>
		<hr />
		账号：<input type="text" name="username" /><br />
		密码：<input type="password" name="pwd" /><br />
		<input type="submit" value="提交" />
		<script type="text/javascript">
			$(":")
		</script>
		</form> 
	</body>
</html>

效果

在这里插入图片描述

结合案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.3.min.js" ></script>
</head>
<body>
当页面加载完成后，将ct表填充进select标签中
<select></select>
<script type="text/javascript">
$.post("/web8/loadCommoditytypeListServlet",function(data){
	for(var i=0;i<data.length;i++){
		$("select:first").attr("name","ct_id").append($("<option>").attr("value",data[i].ct_id).html(data[i].ct_name));
	}
},"json");
</script>