jquery基础知识

1.jquery文件的引入，所有的js代码要写在下面那段代码下面。

<script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的，也要在其它引入的jquery文件上面-->

2.写jquery代码的位置

和js一样，jquery代码也是写在<script>开始和结束标签之间。

<script type="text/javascript">

</script>

jquery选取元素

1.根据id找元素

先在<body>里面写一个<div>

<div id="a1"></div>

（1）用js找，取到的是具体的元素。

var a = document.getElementById("a1");

alert(a);

（2）用jquery找，取到的是jquery对象。

var b = $("#a1");//用jquery找元素的写法,#也是代表根据id找。

alert(b);

alert(b[0]);//从对象里面取元素

2.根据class找元素

先先在<body>里面写2个<div>

<div class="aa"></div>

<div class="aa"></div>

（1）用js找

var a = document.getElementsByClassName("aa");

alert(a);

（2）用jquery找

var b = $(".aa")

//alert(b);

//alert(b[0]);//取到第一个div

//alert(b[1]);//取到第二个div

alert(b.eq(0));//取jquery对象用eq()，取元素本身用[]。

3.根据标签名取元素

（1）用js找

var a = document.getElementsByTagName("div");

（2）用jquery找

var b = $("div");

alert(b);

4.根据name取

先先在<body>里面写1个<div>

<div name="cc"></div>

（1）用js找

var a = document.getElementsByName("cc");

（2）用jquery找

var b = $("[name=cc]");//根据属性筛选，只要是属性的，都可以找到。

//alert(b);

alert(b[0]);

jquery操作元素

1.操作内容

（1）非表单元素

<div id="a1">11</div>
var a = document.getElementById("a1");

//a.innerText = "hello";

a.innerHTML = "<span style='color:red'>world</span>";

（2）表单元素

<input type="text" id="p1" />
var a = document.getElementById("p1");

a.value="hello";

2.操作元素

（1）非表单元素

　　赋值：

<div id="a1">11</div>
var b = $("#a1");

b.text("aaa")

//b.html("aaa")

（2）表单元素

赋值

var b = $("#a1");

b.val("aaa")

取值

var b = $("#a1");

b.val();

3.操作属性

js操作属性

a.setAttribute("","");

a.setAttribute("");

a.removeAttribute("");

jquery操作属性

var b = $("#a1");

b.attr("bs","1");//添加

　b.attr("bs");//获取bs属性的值

　b.removeAttr("bs");//移除bs属性

4.操作样式

（1）js操作样式

　　js不能获取内嵌的属性，只能获取内联的。

a.style.color = red;

（2）jquery操作样式

　　jquery可以获取、设置内嵌的、外部的、内联的样式。

alert(b.css("width"));//获取样式

b.css("font-size","50px");//设置样式

隐藏3个div的做法

<style type="text/css">

.aa{ width:100px; height:100px; background-color:#0F0}<!--用内嵌的方式写属性-->

</style>
<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

（1）js的写法

var a = document.getElementsByClassName("aa");

for(var i=0;i<a.length;i++)

{

    a[i].style.display = "none";

}

（2）jquery的写法

$(".aa").css("display","none");

jquery事件、挂事件、移除事件

<div id="a1">11</div>

<div class="aa" bs="1">aaa</div>

<div class="aa" bs="2">bbb</div>

<div class="aa" bs="3">ccc</div>

<input type="text" id="p1" />

<input type="button" id="b1" value="挂事件" />

<input type="button" id="b2" value="移除事件" />
//jquery加事件

$(document).ready(function(e) {//页面加载完成之后执行事件

        //给a1加点击

        /*$("#a1").click(function(){

            alert('aa');

        })

        //给class为aa的所有元素加事件

        $(".aa").click(function(){

            //alert('bb');

            //alert($(this).text());//取文本值。this点击哪一个就选取哪一个

            //alert($(this).attr("bs"));//取属性值

            $(".aa").css("background-color","#0F0");//先让所有的颜色变为原来的颜色

            $(this).css("background-color","red");//点击哪一个背景颜色换成红色

        })*/

        //第二种方式挂事件

        $("#b1").click(function(){//匿名函数

        $("#a1").bind("click",function(){//bind表示挂事件

            alert("我是挂上的事件");

            })

        $("#b2").click(function(){

            $("#a1").unbind("click");//unbind移除事件

            })

        })

});

11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件的更多相关文章

  1. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  2. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. 11月13日上午ajax返回数据类型为JSON数据的处理

    ajax返回数据类型为JSON数据的处理 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. 11月7日上午PHP会话控制（session和cookie）、跨页面传值

    1.session  登录上一个页面以后,长时间没有操作,刷新页面以后需要重新登录. 特点:(1)session是存储在服务器:   (2)session每个人(登陆者)存一份: (3)session ...

  5. 11月6日上午PHP练习《租房子》解析

    一.题目要求 二.题目做法 1.建立数据库 2.封装类文件 <?php class DBDA { public $fuwuqi="localhost"; //服务器地址 pu ...

  6. 11月3日上午PHP练习《投票》

    1.建立数据库 表1:DiaoYanTiMu 表2:DiaoYanXuanXiang 2.页面 页面1:投票首页 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. 11月1日上午PHP------empty、 is_null、isset、unset的区别

    1.empty 判断一个变量是否为"空".null.false.00.0.'0′.』.为以上值的变量在检测時都将返回true. 2.isset 判断一个变量是否已经设置.0.00. ...

  8. 11月1日上午PHP批量删除

    1.在主页面上添加批量删除有关代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  9. 10月16日上午MySQL数据库基础操作（创建、删除）

    以前用的是鼠标在界面上手动创建,这样创建会比较麻烦,而且还会经常出问题.在其它电脑上要用的话还需要重复操作.所以要使用程序代码操作,能通过代码的就不用手动操作. 在数据库界面选择要用的数据库,双击打开 ...

随机推荐

  1. db2start启动失败

    db2start启动失败 [db2inst1@localhost ~]$ db2start db2start: error while loading shared libraries: libaio ...

  2. 【Linux学习】Linux操作技巧

    linux 删除已输入的命令 ctl + u 删除光标以前的字符 ctl + k 删除光标以后的字符 ctl + a 移动光标至的字符头 ctl + e 移动光标至的字符尾 ctrl + w 往回删除 ...

  3. localhost与127.0.0.1的区别

    localhost与127.0.0.1的区别是什么 定义 localhost也叫local ,正确的解释是:本地服务 127.0.0.1在windows等系统的正确解释是:本机地址(本机服务器) 不同 ...

  4. [WPF系列]-数据邦定之DataTemplate 对 ItemsControl 进行样式和模板处理

    引言   即使 ItemsControl 不是 DataTemplate 所用于的唯一控件类型,将 ItemsControl 绑定到集合仍然很常见. 在 DataTemplate 中有哪些内容一节中, ...

  5. 理解 OpenStack + Ceph （9）： Ceph 的size/min_size/choose/chooseleaf/scrubbing/repair 等概念

    本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...

  6. sass入门

    SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. SASS 官网介绍: sass is the most mature(成熟的),st ...

  7. Hibernate一对多关联

    一对多双向关联关系:(Dept/Emp的案例) 既可以根据在查找部门时根据部门去找该部门下的所有员工,又能在检索员工时获取某个员工所属的部门. 步骤如下: 1.构建实体类(部门实体类加set员工集合) ...

  8. ComponetArt Upload上传组件

    componentArt的组件很炫,但示例并非单独的,要分离开来用还得费一番周折. 一个不经意问题,足足困扰了一好几天,服务器的时间不对,导致控件无法正常显示,无浏览文件按钮 看来,控件的开发者设定了 ...

  9. 设计模式——抽象工厂（Abstract Factory）

    Abstract Factory 抽象工厂模式(创建型模式): new的问题:实现依赖,不能应变应对“具体实例化类型”的变化. 解决思路:--封装变化点:哪里变化,封装哪里           - - ...

  10. docfx组件介绍--YamlSerialization

    在docfx中把元数据以yaml的形式保存,在metadata阶段会序列化数据到yaml文件中,在build阶段又需要从yaml文件反序列化出来.在使用过程中,意外发现yamldotnet在处理大量强 ...