jquery基础

最新推荐文章于 2024-11-16 14:11:26 发布

chumian8751

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量89

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/seektechnology/blog/869489

版权

1.javascript基础

a.变量声明使用var,例如var x=5;

b.JavaScript中的所有事物都是对象:字符串、数字、数组、日期，等等。在JavaScript中,对象是拥有属性和方法的数据。

c.JavaScript函数语法:函数就是包裹在花括号中的代码块,前面使用了关键词 function,例如:

function functionname()
{
   这里是要执行的代码
}

d.局部JavaScript变量:在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
全局JavaScript变量:在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
向未声明的JavaScript变量来分配值:如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明,例如:carname="Volvo";将声明一个全局变量 carname,即使它在函数内执行。

e.javascript中的if...else语句,书写规范:

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

f.javascript中的switch...case语句,书写规范:

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

g.javascript for语句语法:

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

示例:

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }

h.javascript while语句语法:

while (条件)
  {
  需要执行的代码
  }

示例:

while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

i.javascript try...catch语句语法:

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

2.使用jquery

添加<script src="jquery-1.10.2.min.js"></script>

页面如果要utf-8编码,需要在<head></head>之间添加<meta charset="utf-8">

3.jquery查找元素

$("a")查找标签为a的元素

$("#myid")查找id为myid的元素

$(".myclass")查找class为myclass的元素

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

4.jquery事件

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时 )

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

例如:按钮的单击事件$("button").click(function() {})

5.jquery操作html元素的一些操作

a. $(selector).text() 设置或返回所选元素的文本内容

例如:有个button,<button id="mybutton">点我</button>

通过$("#mybutton").text()可以获得点我文本,通过$("#mybutton").text("点击我")可以将文本变为点击我

b.$(selector).html() 设置或返回所选元素的内容（包括 HTML 标记 ),设置值的方式和text()相同

c.$(selector).val() 设置或返回表单字段的值,设置值的方式和text()相同

例如:有个文本输入框:<input type="text" id="test" value="哈哈哈"></input>

可以通过$("#test").val() 可以获得值哈哈哈

d.$(selector).attr("href")可以获得属性href的值,设置值的方式为$(selector).attr("href","www.baidu.com")

还有很多添加、删除元素、对元素的CSS进行操作以及调整元素尺寸的操作

6.jquery遍历

$(selector).parent() 返回被选元素的直接父元素

$(selector).parents() 返回被选元素的所有父元素

$(selector).parentsUntil()返回介于两个给定元素之间的所有祖先元素,例如$("span").parentsUntil("div") 返回介于 <span> 与 <div> 元素之间的所有祖先元素

$(selector).children()返回被选元素所有的子元素

$(selector).find()返回被选元素的后代元素,例如:$("div").find("span")返回属于 <div> 后代的所有 <span> 元素

还有很多获取兄弟同胞以及过滤性的遍历操作

7.jquery AJAX

作用: 在不重新刷新整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

a.$(selector).load(URL,data,callback)

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

例子:加载成功之后提示加载成功对话框,失败提示加载失败对话框

$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

b.$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

例子:使用 $.get() 方法从服务器上的一个文件中取回数据:

$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

c.$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

例子:使用$.post()方法向服务器发送数据:

$("button").click(function(){
$.post("demo_test_post.asp",
{
    name:"Donald Duck",
    city:"Duckburg"
},
function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
});
});

转载于:https://my.oschina.net/seektechnology/blog/869489