iOs基础篇（⼆⼗⼆）——UIPickerView、UIDatePicker控件的使⽤⼀、UIPickerViewUIPickerView是⼀个选择器控件，可以⽣成单列的选择器，也可⽣成多列的选择器，⽽且开发者完全可以⾃定义选择项的外观，因此⽤法⾮常灵活。
1、常⽤属性（1）numberOfComponents：获取UIPickerView指定列中包含的列表项的数量。
（2）showsSelectionIndicator：控制是否显⽰UIPickerView中的选中标记（以⾼亮背景作为选中标记）。
2、常见⽅法（1）- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView; 获取UIPickerView包含的列数量（2）- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component; 该UIPickerView将通过该⽅法判断指定列应该包含多少个列表项（3）- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component; 该⽅法返回的CGFloat值将作为该UIPickerView控件中指定列的宽度（4）- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component; 该⽅法返回的CGFloat值将作为该UIPickerView控件中指定列中列表项的⾼度（5）- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component; 该⽅法返回的NSString值将作为该UIPickerView控件中指定列的列表项的⽂本标题（6）- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView: (UIView *)view; 该⽅法返回的UIView控件将直接作为该UIPickerView控件中指定列的指定列表项（7）- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component; 当⽤户单击选中该UIPickerView控件的指定列的指定列表项时将会激发该⽅法demo代码：1#import"ViewController.h"23@interface ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>{45 UIPickerView *pickerView;6 NSArray *nameArray;7 NSArray *ageArray;8 }910@end1112@implementation ViewController1314 - (void)viewDidLoad {15 [super viewDidLoad];16// Do any additional setup after loading the view, typically from a nib.1718 CGFloat width = self.view.frame.size.width;1920 pickerView = [[UIPickerView alloc] initWithFrame:(CGRect){0,0,width,300}];21 [self.view addSubview:pickerView];22 pickerView.dataSource = self;23 pickerView.delegate = self;24 pickerView.showsSelectionIndicator = YES;2526// 创建并初始化两个NSArray对象，分别作为两列的数据27 nameArray = @[@"⼀", @"⼆", @"三", @"四", @"五", @"六"];28 ageArray = @[@"11", @"22", @"33", @"44", @"55", @"66"];2930 }3132// UIPickerViewDataSource中定义的⽅法，该⽅法返回值决定该控件包含多少列33 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{34return2;// 返回2表明该控件只包含2列35 }3637//该⽅法的返回值决定该控件指定列包含多少个列表项38 - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{39if (component==0) {40// 如果是第⼀列，返回nameArray中元素的个数41// 即nameArray包含多少个元素，第⼀列就包含多少个列表项42return [nameArray count];43 }else44// 如果是其他列，返回ageArray中元素的个数。
iOSUICollectionView实现标签选择器近来，在项⽬中需要实现⼀个类似兴趣标签的选择器。
由于标签的⽂字长度不定，所以标签的显⽰长度就不定。
为了实现效果，就使⽤了UICollectionView来实现了每⾏的标签数量不定、cell的宽度⾃适应的效果。
先在此分享出来：1、⾃适应UICollectionViewCell这⾥只是在⾃适应UICollectionViewCell上放⼀个和UICollectionViewCell保持⼀样⼤⼩的按钮，当选中和取消选中时改变按钮的⽂字颜⾊和边框颜⾊：#pragma mark---标签cell@implementation YLTagsCollectionViewCell-(instancetype)initWithFrame:(CGRect)frame{if(self = [super initWithFrame:frame]){self.backgroundColor = [UIColor clearColor];_btn = [UIButton buttonWithType:UIButtonTypeCustom];//此处可以根据需要⾃⼰使⽤⾃动布局代码实现_btn.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);_btn.backgroundColor = [UIColor whiteColor];_btn.titleLabel.font = [UIFont systemFontOfSize:14];_yer.borderWidth = 1.f;_yer.cornerRadius = frame.size.height/2.0;_yer.masksToBounds = YES;[_btn setTitleColor:HEXCOLOR(0x666666) forState:UIControlStateNormal];_yer.borderColor = HEXCOLOR(0xdddddd).CGColor;_erInteractionEnabled = NO;[self.contentView addSubview:_btn];}return self;}-(void)layoutSubviews{[super layoutSubviews];_btn.frame = CGRectMake(0, 0, self.contentView.frame.size.width, self.contentView.frame.size.height);}-(void)setSelected:(BOOL)selected{[super setSelected:selected];_yer.borderColor = selected?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor;[_btn setTitleColor:selected?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];}-(void)setHighlighted:(BOOL)highlighted{[super setHighlighted:highlighted];_yer.borderColor = highlighted?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor;[_btn setTitleColor:highlighted?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];}@end2、UICollectionViewFlowLayout⼦类--YLWaterFlowLayout的实现.h头⽂件#import <UIKit/UIKit.h>@class YLWaterFlowLayout;@protocol YLWaterFlowLayoutDelegate <NSObject>/**通过代理获得每个cell的宽度*/- (CGFloat)waterFlowLayout:(YLWaterFlowLayout *)layoutwidthAtIndexPath:(NSIndexPath *)indexPath;@end@interface YLWaterFlowLayout : UICollectionViewFlowLayout@property (nonatomic,assign) id<YLWaterFlowLayoutDelegate> delegate;@property(nonatomic,assign)CGFloat rowHeight;///< 固定⾏⾼@end.m⽂件#import "YLWaterFlowLayout.h"@interface YLWaterFlowLayout()@property(nonatomic,strong)NSMutableArray *originxArray;@property(nonatomic,strong)NSMutableArray *originyArray;@end@implementation YLWaterFlowLayout#pragma mark - 初始化属性- (instancetype)init {self = [super init];if (self) {self.minimumInteritemSpacing = 5;//同⼀⾏不同cell间距self.minimumLineSpacing = 5;//⾏间距self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);self.scrollDirection = UICollectionViewScrollDirectionVertical;_originxArray = [NSMutableArray array];_originyArray = [NSMutableArray array];}return self;}#pragma mark - 重写⽗类的⽅法，实现瀑布流布局#pragma mark - 当尺⼨有所变化时，重新刷新- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {return YES;}- (void)prepareLayout {[super prepareLayout];}#pragma mark - 处理所有的Item的layoutAttributes- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{NSArray *array = [super layoutAttributesForElementsInRect:rect];NSMutableArray *mutArray = [NSMutableArray arrayWithCapacity:array.count];for(UICollectionViewLayoutAttributes *attrs in array){UICollectionViewLayoutAttributes *theAttrs = [self layoutAttributesForItemAtIndexPath:attrs.indexPath];[mutArray addObject:theAttrs];}return mutArray;}#pragma mark - 处理单个的Item的layoutAttributes- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{CGFloat x = self.sectionInset.left;CGFloat y = self.sectionInset.top;//判断获得前⼀个cell的x和yNSInteger preRow = indexPath.row - 1;if(preRow >= 0){if(_originyArray.count > preRow){x = [_originxArray[preRow]floatValue];y = [_originyArray[preRow]floatValue];}NSIndexPath *preIndexPath = [NSIndexPath indexPathForItem:preRow inSection:indexPath.section];CGFloat preWidth = [self.delegate waterFlowLayout:self widthAtIndexPath:preIndexPath];x += preWidth + self.minimumInteritemSpacing;}CGFloat currentWidth = [self.delegate waterFlowLayout:self widthAtIndexPath:indexPath];//保证⼀个cell不超过最⼤宽度currentWidth = MIN(currentWidth, self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right);if(x + currentWidth > self.collectionView.frame.size.width - self.sectionInset.right){//超出范围，换⾏x = self.sectionInset.left;y += _rowHeight + self.minimumLineSpacing;}// 创建属性UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; attrs.frame = CGRectMake(x, y, currentWidth, _rowHeight);_originxArray[indexPath.row] = @(x);_originyArray[indexPath.row] = @(y);return attrs;}#pragma mark - CollectionView的滚动范围- (CGSize)collectionViewContentSize{CGFloat width = self.collectionView.frame.size.width;__block CGFloat maxY = 0;[_originyArray enumerateObjectsUsingBlock:^(NSNumber *number, NSUInteger idx, BOOL * _Nonnull stop) {if ([number floatValue] > maxY) {maxY = [number floatValue];}}];return CGSizeMake(width, maxY + _rowHeight + self.sectionInset.bottom);}@end实现思路：在YLWaterFlowLayout中使⽤originxArray和originyArray两个个数组记录了每⼀个⾃定义YLTagsCollectionViewCell的位置x和y。
jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript 能藉由此模型来改变或操作整个网页，<div class="one"> <p>two_1</p> <p>two_2</p> <p>two_2</p></div>我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素<p>，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传$('#MyDiv')<-- 他是一个物件这里有个观念十分重要，因为许多初学者，甚至是一些从Jquery开始学起Javascript的开发者(包括我)，常常会把以下两个程序码搞混在一起//原生JavaScript取id为a的divvar result1 = document.getElementById('a');console.log(result1);//用jquery取id为a的divvar result2=$('#a');console.log(result2);如果你执行这段程序码出来，妳会发现console出来的结果，用JavaScript取出来的结果是DOM，可是一样的div用Jquery取出来的却是个包装过后的物件，换句话说，你不能直接对包装过后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人会说，那意思是不是说以后只能河水不犯井水，往后互不干涉，从此分道扬镳呢? 到也不是var b=$('#a')[0];只要跟上述程序码一样就可以取得DOM的元素了$()工厂不管是如何选择，我们都会用相同的函式$()，就如之前所讲的，他能接受CSS选择器的语法做为参数，而最主要的三个参数分别为tag name、ID与class，当然，这三个参数可以再与其他CSS语法做结合//tag name$('div')//ID$('#myId')//class$('.myClass')而上述函式都会如同第一章所介绍的，都有隐式迭代的特色，而为了做到跨览器的支援，Jquery的选择器包含了CSS1-3，所以不用担心一些比较特别的浏览器(对就是IE6)不能执行，除非addClass('color1');//替index为1的tr加上class$('tr:nth-child(1)').addClass('color2');这里很特别的是，为什么都是替index为1的tr加上class，却是不同的结果呢?，因为:eq()算是一个JavaScript阵列，index是0起始，所以才会选到第二个，而nth-child()是CSS选择器的一种，所以index是以1起始，选到的就是第一个，以下的范例意思相同/3PrJt///选择偶数的tr增加class$('tr:even').addClass('color1');//选择偶数的tr增加class$('tr:nth-child(even)').addClass('color2');就如同刚刚所讲的，index起始不同(JavaScript起始为0，CSS为1)，所以虽然都是取偶数，但却是不同列再来就一些FORM常用的选择器/qcXSy/3/$(':button').click(function(){ alert('a');});这就代表说绑定所有的bitton一个click事件，其他还有像:input、:button、:enabled、:disabled都可以跟其他选择器一起组合成新的选择器更加强大的.filter()当有时候一般的选择器已经不能不能满足我们复杂的DOM时，例如要抓div的爸爸的哥哥的儿子的妹婿的二姑的大舅时...，这时候还可以用一个方法filter，这个方法特别的地方在于他可以带function进去/wGz3k/可以看到function里面限制return index == 1才可以增加CSS，这个好处就在于可以在里面做很多复杂的逻辑运算当然Jquery还有太多太多选择器可以使用，像还有.next()、.parent()、.children()一般常用的这几个，其实就很够用了我认为，再多的选择器有时候好像只是展示不同的写法，但其实只要能抓取到你想要的元素，解决问题你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..实例一个网站中有10种的文章分类，我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目，当用户进入一个页面时，默认显示前面5个分类的名称以及最后一个分类——其他分类，用户可以通过单击“显示全部分类”按钮来显示全部分类，同时一些推荐的分类会加下划线显示，按钮中的文字会改变为“显示部分分类”，再次单击“显示部分分类”后会回到之前的页面状态。
