JQ第一天
1、jQ中最常用对象是$对象,$是jQ的简写。只有将普通的Dom对象封装成jQ对象,才能使用其中方法,jQuery(document).ready()是允许多个的,$(fn)与$(document).ready(fn);等价
2、$.map(array,callback(element,index));
对于数组array中的每个元素,调用callback()函数,最终返回一个新的数组。原数组不变。
$.each(arr,function(k,ele))//k--建 ele--值
3、链式编程(因为每一次css结束之后都是返回到对象那里)
例:$(dvObj).css('width','300px').css('height','200px').css('backgroundColor','yellow').text('hahah');//如果text写内容了,那么就是设置,如果没就是获取
4.选择器
优先顺序:id选择器>类选择器>标签选择器
//id选择器
例:
<style type="text/css">
#p{
width:300px;
height:500px;
background-color:yellow;
text-align:center;
}
</style>
<div id="p">
钟宁是SB
</div>
//标签选择器
div{//这里写标签
width:300px;
height:300px;
background-color:black;
text-align:center;
}
//类选择器
.cls{
width:200px;
height:200px;
background-color:red;
}
5.例子:
script type="text/javascript">
$(function () {//表示$(document).ready(fn)
$('#btn').click(
function () {
$('.cls').css('width','300px').css('height','200px').css('backgroundColor','orange').html('<font color="red" size=7>wahahahhah</font>')
})
}
)
</script>
6.多条件选择
$(div.cls){}//div是标签,.cls是类(div .cls)表示是div标签下的cls类
7.层次选择器
1).$('div p').css('backgroundColor','red');//层中所有的p标签都发生改变
2).$('div>p').css('backgroundColor','red');//直接的子元素,如果在直接的子元素中还有该元素,那么也会发生改变
3).$('div+p').css('backgroundColor','red');层后面的直接的p标签发生改变
4).$('div~p').css('backgroundColor','red');//层后面所有的p标签
5).$('*').css('backgroundColor','red');//所有的标签
8.十个常用方法
1).$('div').next().css('color','red');//层后面的第一个元素
2).$('div').nextAll().css('color','blue');//层后面所有的元素
3).$('div').prev().css('color','blue');//层前面的第一个
4).$('div').prevAll().css('color','blue');//层前面的所有
9.选择器
eq:equal//与eq(number)number相等的那个标签
gt:great than//比number大的
lt:less than//比number小的
note:
$('#tb .tr:first').css('fontSize', '30px');
$('#tb tr:last').css('color', 'red');
$('#tb tr:gt(0):lt(3)').css('fontSize', '28px');
$('#tb tr:odd').css('backgroundColor', 'red');
$('#tb tr:even').css('backgroundColor', 'red');
10.相对元素
例子:
<script type="text/javascript">
$(function () {
$('#tb tr').click(function () {//this会表示id为tb中的行tr
$('td',$(this).siblings()).css('backgroundColor', '');//此处表示click处的行(tr)的所有的兄弟元素里的所有的单元格(td)
$('td:odd', $(this)).css('backgroundColor', 'red');//此处表示click处的行(tr)的所有的奇数单元格(td)
$('td:even', $(this)).css('backgroundColor', 'green');//此处表示click处的行(tr)的所有的偶数单元格(td)
})
})
</script>
JQ第一天的更多相关文章
- JQ第一篇
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css3 位置选择器 类似jq的:eq(0)
JQ使用 :eq(位置),可以选择第几个元素 CSS3里面新增了一个用法,:nth-child(位置) 可实现和JQ同样的功能 需要注意的是jq第一个是从0开始,CSS的第一个是从1开始
- javascript如何用递归写一个简单的树形结构
现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {&qu ...
- (网页)javascript如何用递归写一个简单的树形结构
转自博客园: 现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3 ...
- OpenStack命令行工具与API
Openstack命令行工具 我们推荐Openstack命令行工具和Openstack的Dashboard两者结合使用.一些用户由于使用过其他云技术背景的,可能会使用EC2兼容的API,相对于我们需要 ...
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- jq weui 图片浏览器Photo Browser 第一次点击任意图片总是显示第一张
第一次做这个图片浏览器的时候遇到一个问题,如共有6张图片,每次进入页面时,第一次点击,无论去点击6张图片的哪一张初始化显示的都是第一张图片.后面的每次点击都没有问题的. for(let i = 0;i ...
- jq选择器 第一部分
没有什么新意,全是从网上摘抄的,如果哪天忘了,就来查查吧. 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(documen ...
- js与jq对数组的操作
一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
随机推荐
- 【转】python编码的问题
摘要: 为了在源代码中支持非ASCII字符,必须在源文件的第一行或者第二行显示地指定编码格式: # coding=utf-8 或者是: #!/usr/bin/python # -*- coding: ...
- angularjs里对JS的lowercase和uppercase的完善
读angularjs的源码开头. var lowercase = function (string) { return isString(string) ? string.toLowerCase() ...
- 设计模式--工厂模式Factory(创建型)
工厂模式属于创建型模式,分为三类,简单工厂模式.工厂方法模式.抽象工厂模式. 一.简单工厂模式 在工厂中做判断,根据产品类型从而创造相应的产品,当增加新产品时需要修改工厂类. 例如: enum CTY ...
- Python 开发轻量级爬虫08
Python 开发轻量级爬虫 (imooc总结08--爬虫实例--分析目标) 怎么开发一个爬虫?开发一个爬虫包含哪些步骤呢? 1.确定要抓取得目标,即抓取哪些网站的哪些网页的哪部分数据. 本实例确定抓 ...
- C#反射机制 (转载)
转载:原文出处 http://www.cnblogs.com/binfire/archive/2013/01/17/2864887.html 一:反射的定义 审查元数据并收集关于它的类型信息 ...
- Sublime Text 2 增加python版本
当系统中装有多个python版本时,Sublime Text 2 使用哪个版本需要手动添加 键入一下内容,path输入python的安转路径 保存至Python27.sublime-build文件 ...
- MySQL存储引擎之Myisam和Innodb总结性梳理
Mysql有两种存储引擎:InnoDB与Myisam,下表是两种引擎的简单对比 MyISAM InnoDB 构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个 文件的名字以表的名字开始 ...
- linux下bus、devices和platform的基础模型
转自:http://blog.chinaunix.net/uid-20672257-id-3147337.html 一.kobject的定义:kobject是Linux2.6引入的设备管理机制,在内核 ...
- [Android]电话拨号器开发
继续今天的Android,经过昨天大体了解了Android开发的一些基本文件结构,今天来做一个电话拨号器! 预期达到的效果 实现过程 首先还是按照昨天第一篇教程,新建一个项目叫PhoneCall的An ...
- Google赛马问题
http://coolshell.cn/articles/1202.html 据说,这是Google的面试题.面试题目如下: 一共有25匹马,有一个赛场,赛场有5个赛道,就是说最多同时可以有5匹马一起 ...