jQuery 选择器 prop() 和attr()
Day30 jQuery
1.1.1.1 什么是jQuery?
n jQuery是javaScript的前端框架.对常见的对象和常用的方法进行封装,使用更方便. 它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。
1.1.1 页面加载事件
jQuery提供ready()函数，用于页面成功加载后执行。与window.onload函数类型。
<script type="text/javascript">
//实际开发中，我们习惯将<script>标签编写在<head>标签体内，
//整个页面的解析时从上网下的，此时将不能获得<input>对象
alert($("#demoId").length); //获得匹配对象的个数，0表示没有匹配到任何
//1 javascript页面加载
window.onload = function(){
alert("js页面加载");
}
//2 jQuery页面加载
$(document).ready(function () {
alert("jQuery页面加载");
});
/*
* 注意：
* * js给onload只能赋一个值，如果对此赋值，后面的将覆盖前的。
* * jQuery ready可以使用多次，多个页面加载将依次执行。
*/
</script>
<body>
<input type="text" id="demoId" value="传智&黑马&You"/>
</body>
1.1.2 基本选择器★(重点)
选择器:需要对元素进行操作,而拿到元素的过程就称之为选择器.
<script type="text/javascript">
$(document).ready(function () {
//1 id选择器，格式：$("#id值")
var $d1 = $("#r01");
alert($d1.length); //1 ,id="r01"只有一个
//2 标签选择器，格式：$("标签名")
var $d2 = $("input");
alert($d2.length); //3，表示3个input
//3 类选择器，格式：$(".class类名")
// * length 和 size() 等效
var $d3 = $(".myClass");
alert($d3.size()); //2，表示两个input class为myClass
});
</script>
<input type="radio" name="hobby" value="敲代码" id="r01"/>
<input type="radio" name="hobby" value="调试bug" class="myClass"/>
<input type="radio" name="hobby" value="谈需求" class="myClass"/>
1.1.3 表单属性选择器
:enabled 可用
:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>
:checked 选中（单选radio ，多选checkbox） <input type="..." checked="checked">
:selected 选择（下列列表 <select>） <option selected="selected">
1.1.1 属性操作：prop() 和attr()
l prop() 操作的标签的特性。JQ1.6新特性，获得一些第一次分配undefined属性值的标签时，如果抛异常，将忽略浏览器生成的任何错误。
l removeProp() 移除标签的特性。
l attr() 设置标签属性
l removeAttr() 移除标签的属性。
n 注意：prop() 和 attr() 使用时容易混淆，建议先使用prop() 没有效果，再使用attr()。
1.1.4 常见事件(掌握)
n 表单
u submit
u change
u blur
u focus
n 鼠标(掌握)
u mouseover
u mouseout
u click
n 键盘
n 页面加载
u $(function(){})
l
|
//3.7 两者获取值的区别 |
|
|
//alert($('#sp').text()); //text() 获得文本内容,如果有标签直接忽略 |
|
|
//($('#sp').html());//html() 获得html代码,如果有标签一并获取 |
|
|
//3.8 两者设置值的区别 |
|
|
//$('#sp').text("<i>欢迎新同学</i>"); // 添加文本,如果有标签.浏览器不进行解析 |
|
|
$('#sp').html("<i>欢迎新同学</i>");//添加html代码,如果有标签.浏览器进行解析 |
|
|
* A.append(B) 将B插入到A内部的后面 (掌握) |
|
|
n A.appendTo(B) 将A插入到B内部的后面 |
|
A.append(B) 将B插入到A内部的后面 (掌握) |
|
|
n A.appendTo(B) 将A插入到B内部的后面 |
|
|
script type="text/javascript"> |
|
|
var cityObj = $('#city'); |
|
|
var p2Obj = $('#p2'); |
|
|
//1 city 插入 p2 后面 |
|
|
// A.afyer(B) 将B添加到A后面 |
|
|
//p2Obj.after(cityObj); |
|
|
//A.before(B) 将B添加到A前面 |
|
|
//2 city 插入 p2 前面 |
|
|
p2Obj.before(cityObj); |
|
jQuery 选择器 prop() 和attr()的更多相关文章
- jQuery的prop和attr的区别，及判断复选框是否选中
jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...
- jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- jquery的prop()和attr()
jQuery1.6以后prop()和attr()的应用场景如下: 第一原则:只添加属性名称该属性就会立即生效应该使用prop(); 第二原则:只存在true/false的属性应该使用prop(); 设 ...
- 【Jquery】prop与attr的差别
近期因项目须要用到复选框,当中一个控制全选. // 全选 $(".ckb_all").click(function(){ if($(this).attr("checked ...
- jQuery中prop和attr区别
问题 今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式. 于是,$butto ...
- 第82天：jQuery中prop()和attr()的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- jquery中prop，attr，data的区别
这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...
- jquery之prop与attr区别。
一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script ...
随机推荐
- 阿里安全归零实验室招聘各路大牛！offer好说！
阿里安全归零实验室成立于2017年11月,致力于对黑灰产技术的研究.实验室的愿景是通过技术手段解决当前日益严重的网络违规和网络犯罪问题,为阿里新经济体保驾护航. 实验室与寄生在阿里生态经济体的黑灰产直 ...
- shell多进程脚本
#!/bin/bash python_path=/home/huaw/crawler python_name=list_all_v6_crawler.py MAX_SYNC_PROCESS=40 ec ...
- vue-router动态路由 刷新页面 静态资源没有加载的原因
在做项目的时候,发现刷新页面的时候,静态路由没有加载,度娘了一圈,终于解决了. vue-router使用history模式+使用嵌套路由: 访问路由和嵌套路由页面,显示正常,但是刷新页面的时候,嵌套路 ...
- day3 自定义指令详解
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- CLR-基元类型以及溢出检查
=========(CLR via C#阅读笔记)======== 基元类型(primitive type): 基元类型也不做过多的解释,举个例子即可清晰的辨别 在java里曾使用过Sting s=& ...
- Win10 VS2012 无法注册IIS4.0 解决方案
死活注册不上,度娘也找了,最终找到只要打个补丁就行. 安装: Microsoft Visual Studio 2012 更新 (KB3002339) 下载:http://www.microsoft.c ...
- 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 在脚本中使用MonoBehaviour
继上次分析了热更新的Demo后,这次来介绍如何在热更新代码中使用MonoBehaviour. MonoBehaviour挂载到GameObject对象上的脚本的基类.平常Unity开发时,简单的做法就 ...
- 智能合约开发solidity编程语言开发一个以太坊应用区块链投票实例
智能合约开发用solidity编程语言部署在以太坊这个区块链平台,本文提供一个官方实战示例快速入门,用例子深入浅出智能合约开发,体会以太坊构建去中心化可信交易技术魅力.智能合约其实是"执行合 ...
- [SDOI2008]Cave 洞穴勘测
题目描述 辉辉热衷于洞穴勘测. 某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连接了恰好两个洞穴.假 ...
- [BZOJ]4162: shlw loves matrix II
Time Limit: 30 Sec Memory Limit: 128 MB Description 给定矩阵 M,请计算 M^n,并将其中每一个元素对 1000000007 取模输出. Inpu ...