JQuery
Posted Lyy11
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery相关的知识，希望对你有一定的参考价值。
jQuery是一个快速、简洁的javascript框架的，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理等等
<script type="text/javascript">window.onload = function () {var btnObj = document.getElementById("btnId")alert(btnObj)btnObj.onclick = function () {alert("js 原生的单击事件")}}</script>
这是原生的Javascript代码 点击id为"btnId"的button执行。
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}var $btnObj = $("#btnId"); // 表示按id查询标签对象$btnObj.click(function () { // 绑定单击事件alert("jQuery 的单击事件");});});</script>
这是JQuery封装后的JS代码，需引入jquery-x.x.x.js
JQuery大量运用"$","$"的作用如下：
//传入参数为[函数]时：在文档加载完成后执行这个函数//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
$(" <div>" +" <span>div-span1</span>" +" <span>div-span2</span>" +" </div>").appendTo("body");
如上便是先连接HTML字符串，再为此"字符串"作为HTML执行，将此对象加入到body的末尾
$(function () {alert("页面加载完毕!")})
上图是等待页面加载完毕后才执行
"$"作为选择器最常用,基本语法是 $("#id")id选择器 $("标签名")标签选择器 $(".class")类选择器，除此还有$(":text") $("select option:selected")等等等等,作用等同于JS原生代码的document.getElementById/getElementsByName等函数，都是查找对象。
ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素parent > child 子元素选择器：在给定的父元素下匹配所有的子元素prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
除以上还有内容过滤器 属性过滤器 基本过滤器 表单过滤器等等
JQuery对象实质就是DOM对象+JQuery方法(函数)，两者可以互转。
var $xxx=$(DOM对象)var DOM=$(DOM对象)[下标]
html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样
attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等 attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbjprop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
以上为基本的属性操作，可以获得和修改html标签内的属性值
以下为一个表单增删改操作列子
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="styleB/css.css" /><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {var t=3;$("#addEmpButton").click(function () {var $name=$(":text[name='empName']").val();var $email=$(":text[name='email']").val();var $sal=$(":text[name='salary']").val();if($name!=null && $email!=null && $sal!=null){t++;var $add=$("<tr id='"+ t+'t' +"'>\n" +"<td>"+$name+"</td>" +"<td>"+$email+"</td>" +"<td>"+$sal+"</td>" +"<td><a href='javascript:void(0)'>Delete</a></td>" +"</tr>")$add.appendTo($("#employeeTable"));$add.find("a").click(del)}})del=function(){// 转成JQuery元素var $pp=$(this).parent().parent();var ok=confirm("确认删除数据吗？")if(ok){$pp.remove()}}$("a").click(del);})</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr id="1t"><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:void(0)">Delete</a></td></tr><tr id="2t"><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="javascript:void(0)">Delete</a></td></tr><tr id="3t"><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="javascript:void(0)">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></body></html>
del()执行完超链接a会自动跳转，防止自动跳转可以return false或者把超链接改为javascript:void(0) void(0)运行结束不返回任何值
运行结果，可以添加和删除记录
以上是关于JQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段