Jquery学习

来源：互联网发布：酷宝数据编辑：程序博客网时间：2024/06/13 02:46

jQuery 语法

领悟1：var是js中的语法定义，代表变量，可以用于添加元素、添加到方法中的参数等，不需要带变量，也可以用多个变量，

不需要加引号，每个变量之间用逗号间隔。

领悟2：在jquery中选择元素用val、和text才可以。

领悟3：除了变量好像都要用双引号才可以。

领悟4：方法（）是返回元素一般，里面加东西一般是设置。

5： html文档，jsp文档，当创建他们的时候会发现区别在于，自动写好的那些出现在

6：单引号，双引号无所谓？测试了下是这样子的。

7. HTML DOM （文档对象模型）（model用来创建添加数据？项目中的）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery 选择器：

1.基本选择器（类似于CSS选择器）

语法描述$(this)当前 HTML 元素$("p")所有 <p> 元素$("p.intro")所有 class="intro" 的 <p> 元素$(".intro")所有 class="intro" 的元素$("#intro")id="intro" 的元素$("ul li:first")每个 <ul> 的第一个 <li> 元素$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素
2.层次选择器

用于下拉列表之类的，通过DOM元素之间的层次关系获取页面元素

3.过滤器选择器

4.表单选择器：

例子：

$(":input"）.hide();

$(":text").show();

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数绑定函数至$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function)触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

jQuery操纵DOM（类似于HTML）

原因：jquery大多数都在操纵dom，比如ajax返回json数据、动态向dom添加、显示节点或者更改页面上的元素的CSS和属性。

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    alert("Text: " + $("#test").text());  });  $("#btn2").click(function(){    alert("HTML: " + $("#test").html());  });});</script></head><body><p id="test">这是段落中的<b>粗体</b>文本。</p><button id="btn1">显示文本</button><button id="btn2">显示 HTML</button></body></html>

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    alert("Value: " + $("#test").val());  });});</script></head><body><p>姓名：<input type="text" id="test" value="2"></p><button>显示值</button></body></html>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

实例

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    alert($("#w3s").attr("href"));  });});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p><button>显示 href 值</button></body></html>

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    $("#test1").text("Hello world!");  });  $("#btn2").click(function(){    $("#test2").html("<b>Hello world!</b>");  });  $("#btn3").click(function(){    $("#test3").val("Dolly Duck");  });});</script></head><body><p id="test1">这是段落。</p><p id="test2">这是另一个段落。</p><p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p><button id="btn1">设置文本</button><button id="btn2">设置 HTML</button><button id="btn3">设置值</button></body></html>

设置属性 - attr()

attr() 方法也允许您同时设置多个属性。

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("#w3s").attr({      "href" : "http://www.w3school.com.cn/jquery/",      "title" : "W3School jQuery 教程"    });  });});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p><button>改变 href 和 title 值</button><p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p></body></html>

阅读全文

0 0