JQuery&BootStruapJQuery

JQuery

• html();
  
  • 如果括号内没有参数:返回的是调用这个方法的对象的内容.
  • 如果括号内有参数:覆盖原对象内的所有内容为指定的参数.
  • 括号内可以写标签会识别出标签
    
    
• text();
  
  • 如果括号内没有参数:返回的是调用这个方法的对象的所有文本内容.
  • 如果括号内有参数:覆盖原对象内的所有文本内容.
  • 括号内写标签不会识别,只会当做一个字符串
    
    
• val();
  
  • 如果括号内没有参数,获取value属性的值
  • 如果括号内设置参数,设置默认值
    
    
• 选择器,表单对象属性
  
  • :selected 下拉列表的选中状态
  • :checked 单选框或者复选框的选中状态
    
    
  
  

JQuery的事件切换

• toggle();鼠标单击事件切换
• hover(); 鼠标悬停事件切换
  
  • 如果只是修改样式,就用样式伪类比较方便
  • 如果需要修改其他的内容,就用事件来写代码实现.
    
    
  
  

JQuery的过滤和查找

• find():从调用这个方法的属性对象开始查找他的所有后代中,指定的内容(内容包含标签或者文本等等)
• chiledren():查找所有调用这个方法的属性元素的子元素中符合指定条件的元素.
• parent():查找调用这个方法的元素对象的父元素中符合指定条件的.
  
  

JQuery事件的处理

• trigger():触发器的意思.执行完毕后会再执行第一次系统默认的相同事件
• triggerHandler()执行完毕后不会再执行系统默认的相同事件.
• on("事件1 事件2 事件3",function(){});不同的事件触发相同的函数,不同的事件之间用空格隔开,且在同一个引号内.
• bind();用法和on差不多.
  
  

事件委派

• 事件绑定是在加载的时候就绑定了,而由于事件创建的元素(通常都是在页面加载完成以后创建的),是不能直接绑定事件的,而要处理这些问题就需要事件委派,把未来的创建的子元素委派给父元素来绑定,
• delegate(); HTML $("父元素").delegate("子元素","子元素属性",function(){ 子元素要执行的函数内容 $(this),这里的this代表的是子元素. });
• 定义多个class,可以在分号内,写入多个class样式,中间用空格隔开,都在分号内.
• append()添加的是子元素,要添加兄弟元素就需要获取父元素,然后用append()来添加,获取父元素的方法是$().parent()然后再用append()方法HTML $().parent().append();
  
  

BootStrap前端响应式框架布局

• bootstrap是基于HTML5的一个框架,
• 响应式页面,就是网页适配你打开网页的硬件的屏幕样式.即是一次编写多处打开,都可以正常浏览.
• BootStrap的中文网网址:
  
  • www.bootcss.com.
    
    
• 引入方式:
  
  • 引入bootstrap文件之前要先引入JQuery文件,因为bootstrap需要用到JQuery文件里边的内容
    
    
• 从bootstrap3之后就是移动设备优先,所以在电脑端上使用需要引入一个标签HTML <meta name="viewport" content="widthdevice-width, initial-scale=1" > meta标签最后的>之前没有"/"符号
  
  

bootstrap的全局CSS

• BootStrap的框架提供了一系列的CSS样式,可以直接拿来使用
• 布局容器
  
  • 底层是在于媒体查询,在这里来确定打开端的屏幕是哪一种,即分辨率的宽度.
  • .container
  • .container-fluid 类用于100%宽度
    
    
• 栅格系统
  
  • 可以嵌套
  • 将一个屏幕分成最多有12列的形式来显示数据
  • 定义行
  • 定义列:所有的n加一起要等于12,大于12就会自动换行.
    
    
  
  

JQuery&BootStruapJQuery

JQuery

• html();
  
  • 如果括号内没有参数:返回的是调用这个方法的对象的内容.
  • 如果括号内有参数:覆盖原对象内的所有内容为指定的参数.
  • 括号内可以写标签会识别出标签
    
    
• text();
  
  • 如果括号内没有参数:返回的是调用这个方法的对象的所有文本内容.
  • 如果括号内有参数:覆盖原对象内的所有文本内容.
  • 括号内写标签不会识别,只会当做一个字符串
    
    
• val();
  
  • 如果括号内没有参数,获取value属性的值
  • 如果括号内设置参数,设置默认值
    
    
• 选择器,表单对象属性
  
  • :selected 下拉列表的选中状态
  • :checked 单选框或者复选框的选中状态
    
    
  
  

JQuery的事件切换

• toggle();鼠标单击事件切换
• hover(); 鼠标悬停事件切换
  
  • 如果只是修改样式,就用样式伪类比较方便
  • 如果需要修改其他的内容,就用事件来写代码实现.
    
    
  
  

JQuery的过滤和查找

• find():从调用这个方法的属性对象开始查找他的所有后代中,指定的内容(内容包含标签或者文本等等)
• chiledren():查找所有调用这个方法的属性元素的子元素中符合指定条件的元素.
• parent():查找调用这个方法的元素对象的父元素中符合指定条件的.
  
  

JQuery事件的处理

• trigger():触发器的意思.执行完毕后会再执行第一次系统默认的相同事件
• triggerHandler()执行完毕后不会再执行系统默认的相同事件.
• on("事件1 事件2 事件3",function(){});不同的事件触发相同的函数,不同的事件之间用空格隔开,且在同一个引号内.
• bind();用法和on差不多.
  
  

事件委派

• 事件绑定是在加载的时候就绑定了,而由于事件创建的元素(通常都是在页面加载完成以后创建的),是不能直接绑定事件的,而要处理这些问题就需要事件委派,把未来的创建的子元素委派给父元素来绑定,
• delegate(); HTML $("父元素").delegate("子元素","子元素属性",function(){ 子元素要执行的函数内容 $(this),这里的this代表的是子元素. });
• 定义多个class,可以在分号内,写入多个class样式,中间用空格隔开,都在分号内.
• append()添加的是子元素,要添加兄弟元素就需要获取父元素,然后用append()来添加,获取父元素的方法是$().parent()然后再用append()方法HTML $().parent().append();
  
  

BootStrap前端响应式框架布局

• bootstrap是基于HTML5的一个框架,
• 响应式页面,就是网页适配你打开网页的硬件的屏幕样式.即是一次编写多处打开,都可以正常浏览.
• BootStrap的中文网网址:
  
  • www.bootcss.com.
    
    
• 引入方式:
  
  • 引入bootstrap文件之前要先引入JQuery文件,因为bootstrap需要用到JQuery文件里边的内容
    
    
• 从bootstrap3之后就是移动设备优先,所以在电脑端上使用需要引入一个标签HTML <meta name="viewport" content="widthdevice-width, initial-scale=1" > meta标签最后的>之前没有"/"符号
  
  

bootstrap的全局CSS

• BootStrap的框架提供了一系列的CSS样式,可以直接拿来使用
• 布局容器
  
  • 底层是在于媒体查询,在这里来确定打开端的屏幕是哪一种,即分辨率的宽度.
  • .container
  • .container-fluid 类用于100%宽度
    
    
• 栅格系统
  
  • 可以嵌套
  • 将一个屏幕分成最多有12列的形式来显示数据
  • 定义行
  • 定义列:所有的n加一起要等于12,大于12就会自动换行.