博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery基础
阅读量:6578 次
发布时间:2019-06-24

本文共 2744 字,大约阅读时间需要 9 分钟。

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

2.写jquery代码的位置

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

 

jquery选取元素

 

1.根据id找元素

先在<body>里面写一个<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>

(1)用js找

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

(2)用jquery找

var b = $(".aa")//alert(b);//alert(b[0]);//取到第一个div//alert(b[1]);//取到第二个divalert(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>

(1)用js找

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

(2)用jquery找

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

 

jquery操作元素

1.操作内容

(1)非表单元素

11
var a = document.getElementById("a1");//a.innerText = "hello";a.innerHTML = "world";

(2)表单元素

var a = document.getElementById("p1");a.value="hello";

 

2.操作元素

(1)非表单元素

  赋值:

11
var b = $("#a1");b.text("aaa")//b.html("aaa")

 

  取值:

var b = $("#a1");alert(b.text());//alert(b.html());

 

(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的做法

 

  (1)js的写法

var a = document.getElementsByClassName("aa");for(var i=0;i

  (2)jquery的写法

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

 

 

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

11
aaa
bbb
ccc
//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移除事件                    })                        })            });

转载于:https://www.cnblogs.com/ysdong/p/6058105.html

你可能感兴趣的文章
java设计模式-建造者模式
查看>>
hdu-2604 Queuing---递推+矩阵快速幂
查看>>
OC基础第一讲
查看>>
超越MySQL:三个流行MySQL分支的对比(转)
查看>>
yii2权限控制rbac之rule详细讲解(转)
查看>>
lemur run PLSA
查看>>
Python中什么是变量Python中定义字符串
查看>>
资源文件
查看>>
yii2设置默认控制器
查看>>
Hibernate的大对象映射
查看>>
mongodb 的基本操作
查看>>
Django文档阅读之查询
查看>>
如何把pdf转换为txt文档,pdf转txt的好方法
查看>>
SpringMVC(一)
查看>>
用户登录的代码编写思路
查看>>
素数筛
查看>>
关于C#中的 static
查看>>
深度学习(二)神经网络中的卷积和反卷积原理
查看>>
Struts2单文件上传原理及示例
查看>>
1015: C语言程序设计教程(第三版)课后习题6.5
查看>>