jQuery学习笔记(二)

  jQ变成过程
  1,引入jQ的js文件
  2,使用选择器定位要操作的节点
  调用jQ的方法进行操作
  jQ对象
  为了解决浏览器兼容问题而解决的提供一种统一封装后的对象描述
  jq提供的方法都是jQ特有的,而且大多数返回也是jQ对象,所有方法可以连缀调用"jQ对象.方法().方法().方法()"
  如$("div")和$("#d1")都是jQ对象
  选择器的种类
  基本选择器
  层次选择器
  过滤选择器
  表单选择器
  工厂函数
  在jQurey中,无论使用哪种类型的选择符号,都从一个美元符号$和一堆圆括号开始:$()
  所有能在样式表中使用的选择符,都能放到这个圆括号的引号内
  标记选择器 element
  可以选择整个div或者元素区块进行定位
  合并选择器,即合并所有选择器的合集
  selector1,selector2
  <body>
   <div id="d1">hello</div>
   <div class="s1">hello1</div>
   <P>空白<P>
   function f(){
    $('#d1,s1,p').css('font-size','30px');
   }
  </body>
  层次选择器
  1,select1空格select2
  function f(){
  $('#d1 div').css('font-size','30px');
  }
  可以直接找到d1下面的div元素,直接进行修改
  2,select1>select2
  只查找直接子节点,不查找间接子节点
  原理,只找下一级,在下一级就不找了
  3,selcet1+select2
  +表示下一个兄弟节点,元素中间不能间隔,否则获取不到
  4,select1-select2表示这个区域下面的所有元素
  基本过滤选择器
  过滤选择器是以":"或者"[]"开始
  复制DOM节点
  clone()
  clone(true)复制的节点也具有行为(将处理代码一块复制)
  jQ中的样式操作
  attr("class","") 获取和设置样式
  addClass("") 追加样式
  removeClass 移除样式
  remoreClass() 移除所有的样式
  toggleClass() 切换样式
  hasClass("") 是否有某个样式
  css("") 读取css的值
  css("","") 设置多个样式
  遍历节点
  children()  /children(selector)  只考虑直接子节点
  next() /next(selector)  下一个兄弟节点
  prev()  /prev(selector) 上一个兄弟节点
  siblings() /siblings(selector) 上一个兄弟节点
  find(selector) 查找满足选择器的所有后代
  parent() 父节点
  Browser 浏览器
  网站是bs结构
  1,请求request
  2,处理请求
  3,响应response
  4,浏览器解析
  5,生成DOM数
  6,渲染
  在jQ中,如何处理页面的加载事件
示例一 $(document).ready(function(){
  一,初始化操作
  });
  function是写在加载函数ready中的
  示例一的简写:功能是一样的
  $(function(){ 初始化操作})
  jQ初始化事件与window.onload的不同
  1,window.onload在一个页面中,只能有一个而jq的初始化事件,
  在一个页面中,可以有若干个
  2,window.onload要在页面加载完毕时执行,而jq的初始化事件,是在DOM树加载完毕时,就已经开始执行
  jQuery和其他库并存
  1,js库后导入的会覆盖掉先导入的
  2,可以让jQ将$的控制权交出,jQuery将$的控制权交出
  jQuery.noConflict();
   如果还想使用,将$换成jQurey就可以
  二,事件绑定
  下面是是dom操作方法
  elem.οnclick=function(){}
  addEveventList("click",fn);
  下面是jq操作方法
  3.1, $obj.bind(事件名称,执行函数)
  事件名称:jq所支持的事件名称
  执行函数:待执行的function
  $obj.bind("click",function(){
  事件操作 
  })
  3.2事件的简写
  $obj.事件名称(fn);绑定事件
  $obj.事件名称();执行事件
  3.3解绑事件
  $obj.unbind(事件名称,fnname); fnname解绑事件指定的对应指定函数
  4,事件参数
  绑定事件时,直接定义一个参数,该参数则为当前时间的事件对象,可以通过事件对象,获取鼠标坐标,按下键盘键位,以及事件源,组织事件冒泡。
  4.1获取事件源头
  4.1.1 event.target
  4.1.2 this  单纯获取事件源
  注意以上都是DOM对象
  4.2事件冒泡
  子节点产生的事件会一次抛给父节点
  取消事件冒泡
  e.stopPropagation()可以取消事件冒泡,可以组织事件向上传递
  5,模拟操作的语法
  $obj.trigger(事件类型)
  如$obj.trigger("focus");--激发$OBJ的click事件
  简写形式$obj.click(); 
  6,动画
  6,1基本显示与隐藏相关
  hide(speed,fn)   speed动画完成的时间毫秒级
  fn:动画完成后回调函数
  show(speed,fn)
  6,2动画的排队效果  动画完成之后可以调用另外一个动画
  6,3自定义动画
  $obj.animate({},speed);
 
  jQ数组操作
  length  当前jQ对象所封装的数据长度(元素个数)
  1,循环遍历数组中的每一个元素
  $obj.each(function(i){
  this表示当前循环遍历出来的DOM元素
  })
  2,eq(index)
  获取当前数组中指定索引处的DOM元素
  var td=$("td").eq(0);
  3,get()
  返回由DOm元素组成的数组
  4,index(obj)
  获取obj在当前数组中的索引
  obj可以是dom对象也可以是jQ对象
 
  jQ插件的查找与帮助
  jQ的官网提供了大量的插件,并给出评级和bug
  开元中国  oschina.net
  使用插件,插入到页面,确保在jQ源文件之后
  表单验证插件
  主要针对表单元素进行验证,并给出响应的图形以及文字提示
  常用表单验证插件
  formValidator
  jQuery.validator
  easyForm
  树形插件ztree
$(document).ready(function(){
$("#myDiv").animate({
height:"100px",left:"100%",top:"100px"},9000);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值