jquery学习笔记

<script src="jquery.js"></script>
<script>
jQuery
    学习网址http://jquery.cuishifeng.cn/
    模块 = 类库
      对DOM、javaScript的类库
      1、查找元素
            Dom：
                差不多10个左右
             jQuery
             px：
                1.x   1.12  兼容性好
                2.x
                3.x
                转换：
                    jquery对象[0]  转换为Dom对象
                    Dom对象  转换为jquery对象 $(Dom对象)
            选择器
            直接找到某个或者某类标签
            1、id
               $('#id')
            2、class
                <div class='c1'></div>
                $('.c1')
            3、标签
                $('a')  找到所有的a标签
            4.组合选择
                $('a, .c1， div ，#12') 找到多个类型的标签
            5、层级选择
                $('#i1 a') 找i1下的所有a标签
                $('#i1>a') 找i1下的a标签只找儿子层
            6、基本
                ：first
                ：last
                ：eq（）
            7、属性
                $('[asd]') 具有asd属性的所有标签
                $('[asd=‘a12’]') asd属性等于a12的标签
                <input type='text'/>
				<input type='text'/>
				<input type='file'/>
				<input type='password'/>

				$("input[type='text']")
				$(':text')
            实例：
                多选，反选，全选
				- 选择器
				-
					$('#tb:checkbox').prop('checked');        获取值
					$('#tb:checkbox').prop('checked', true);  设置值
				-
					jQuery方法内置循环： $('#tb:checkbox').xxxx

				- $('#tb:checkbox').each(function(k){
						// k当前索引
						// this，DOM，当前循环的元素 $(this)

					})
				- var v = 条件 ? 真值 : 假值
            筛选器:
                $(this).next()      下一个
                $('#i1').nextAll()
				$('#i1').nextUntil('#ii1')
                <div>
					<a>asdf</a>
					<a>asdf</a>
					<a id='i1'>asdf</a>
					<a>asdf</a>
					<a id='ii1'>asdf</a>
					<a>asdf</a>
				</div>

                $(this).prev()      上一个
                $('#i1').prevAll()
				$('#i1').prevUntil('#ii1')

                $(this).parent()    父
                $('#i1').parents() 祖宗
				$('#i1').parentsUntil()

                $(this).children()  孩子
                $('#i1').siblings() 兄弟
                $('#i1').find('#i1') 子子孙孙中查找

                $('li:eq(1)')  获取匹配的指定元素
				$('li').eq(1)
				first()      获取匹配到的第一个元素
				last()        获取匹配到的最后一个元素
				hasClass(class)  是否含有某class
            文本操作：
                .text()
                .text('设置的内容')
                .html()
                .html('设置的内容')
                .val()
                .val('设置的内容')
            样式操作：
                addClass
                removeClass
                toggleClass
            属性操作：
                #专门用于做自定义属性
                .attr('name')
                .removeattr('name')
                .attr('name','za')
                #专门用于chekbox，radio（不使用设置属性的方式，因为第一版本和第二版本这个方法处理不彻底，所以使用专用的prop方法）
                .prop('checked')
                .prop('checked',true)

            ps:
                index 获取索引位置

            文档处理：
                append
                prepend
                after
                before
                remove
                empty 清空内容不清空标签
                clone
            CSS处理：
                $(xx).css('color','red')
                点赞：
                    $(xx).append()
                    $(xx).remove()
                    setInterval()   定时器
                    透明度
                    position
                    字体大小 位置

            位置：
			$(window).scrollTop()  获取
			$(window).scrollTop(0) 设置
			scrollLeft([val])
			offset().left                 指定标签在html中的坐标
			offset().top                  指定标签在html中的坐标
			position() 	                  指定标签相对父标签(relative)标签的坐标
			<div style='relative'>
				<div>
					<div id='i1' style='position:absolute;height:80px;border:1px'></div>
				</div>
			</div>

			$('i1').height()           # 获取标签的高度 纯高度
			$('i1').innerHeight()      # 获取边框 + 纯高度 + ？
			$('i1').outerHeight()      # 获取边框 + 纯高度 + ？
			$('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？

			# 纯高度，边框，外边距，内边距

		事件
			DOM： 三种绑定方式
				jQuery：
					$('.c1').click()
					$('.c1').....
					$('.c1').bind('click',function(){
					})
					$('.c1').unbind('click',function(){
					})
					*******************
					$('.c').delegate('a', 'click', function(){
					})
					$('.c').undelegate('a', 'click', function(){
					})
					$('.c1').on('click', function(){
					})
					$('.c1').off('click', function(){
					})
				阻止事件发生
					return false
				# 当页面框架加载完成之后，自动执行
				$(function(){
					$(...)
				})

		jQuery扩展：
			- $.extend        $.方法
			- $.fn.extend     $(..).方法

			(function(){
				var status = 1;
				// 封装变量
			})(jQuery)
        JS正则：
            test -判断字符串是否符合规定的正则
            exec -获取匹配的数据
            rep=/^\d+$/
            rep.test()
            rep.exec(str)
                登录注册验证
        组件：
            bootStrap模板
                CSS
                js
            jqueryUI 先用这个
            EasyUI   修改代价比较大  存在大量ajax操作
      2、操作元素
</script>