Jquery 学习之基础一

1.添加一个CSS类

$("button").click(function(){
  $("#div1").addClass("important blue");
});

==============================

2.移除一个类

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

==============================

3.切换类

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

==============================

4.Jquery 设置CSS属性

$("p").css("background-color","yellow");//设置一个属性

$("p").css({"background-color":"yellow","font-size":"200%"});//设多个属性

==============================

5.清空子元素

$("#div1").empty();//所有在div1块中的内容均被移除

==============================

6.设置元素的父类属性

$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});//parent() 方法返回被选元素的直接父元素

});

$("span").parents()//parents() 方法返回被选元素的所有父元素

==============================

7.返回每个div的直接子类元素

$(document).ready(function(){
 $("div").children().css({"color":"red","border":"2px solid red"});
});

==============================

8.find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

$("div").find("span").css({"color":"red","border":"2px solid red"});

==============================

9.next()方法返回下一个同胞元素

$("h2").next().css({"color":"red","border":"2px solid red"});

==============================

10.过滤

$("p").filter(".url");//返回带有类名 "url" 的所有 <p> 元素

==============================

11.first() 方法返回被选元素的首个元素

$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素:

==============================

12.last() 方法返回被选元素的最后一个元素。

$("div p").last();

==============================

13. eq() 方法返回被选元素中带有指定索引号的元素。

$("p").eq(1);

==============================

14.not() 方法与 filter() 相反。

$("p").not(".url");//返回不是类url的P元素

==============================

15.三个操作dom的方法、DOM = Document Object Model(文档对象模型)

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

例子:

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

$("#btn1").click(function(){ 
    $("#test1").text("Hello world!"); 
});

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

$("#btn2").click(function(){ 
    $("#test2").html("<b>Hello world!</b>"); 
});

注:id=test,这一块是文本内容<p>名称: <input type="text" id="test" value="练习easyUI"></p>

通过 jQuery val() 方法可以获得输入字段的值

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());//获取值
});

$("#btn3").click(function(){ 
    $("#test3").val("RUNOOB"); //设置值
});

==============================

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

$("button").click(function(){
  alert($("#runoob").attr("href"));//获取id=“runoob”中链接的href属性

$("#runoob").attr("href","http://www.runoob.com/jquery");//设置href属性
});

==============================

17.text()中的参数是回调函数,参数为索引和内容

$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本:雷明轩 (index: " + i + ")";
});
});
});

时间: 2024-07-31 14:33:02

Jquery 学习之基础一的相关文章

Jquery学习之基础篇二

1.Jquery添加元素的方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 2.使用三种方式创建文本 var txt1="<p>文本.</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本."); //

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

JQuery学习笔记2015-8-15(第94天)

JQuery 学习基础: 什么是JQ? •一个优秀的JS库,大型开发必备 JQ的好处? •简化JS的复杂操作 •不再需要关心兼容性 •提供大量实用方法 如何学习JQ? •www.jquery.com •JQ只是辅助工具,要正确面对 •需要分阶段学习 JQ设计思想? •选择网页元素 –模拟CSS选择元素 –独有表达式选择 –多种筛选方法 •JQ写法 –方法函数化 –链式操作 –取值赋值合体 •JQ与JS关系 –可以共存,不能混用 实例: <!DOCTYPE HTML> <html>

jQuery学习之:Validation表单验证插件

http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每个人都能够有所掌握,慢慢会用.于是,自己便开始学习…… 由于Struts2自己早就学过,因而不需要花多少时间.而AJAX之前没怎么用过.现在AJAX框架如此之多,选择哪一个呢?开始打算选择 dojo,但是看了一点后,发现蛮复杂的.在之前有学过一点点jQuery,而网上也说jQuery很强大而且很容易

一步步学习javascript基础篇(3):Object、Function等引用类型

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.

很不错的jQuery学习资料和实例

这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关教程,  如果你对jQuery感兴趣, 也可以查看帕兰写的文章: 37个更加出色的jQuery插件 45个新鲜出炉的jQuery插件 50多个强大的jQuery插件应用实例 John Resig John Resig, 这位是 JQuery JavaScript脚本库的创建者, 同时也是Mozill

jquery学习之AJAX

1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与server交换数据并更新部分网页的艺术,在不又一次载入整个页面的情况下. 2,什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步

第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为"移动",使用"移动"还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师,但我不认识所有学生,只认识上学期教过的几位同学.比如小明.我们再用一小串代码来作解释: <body> <span id="ming">我是小明</span> <span>我坐在小明后面,我叫李四</sp