JQuery考点

jquery简介

• jQuery是由美国人John Resig于2006年初创建的，至今已吸引了来自世界各地的众多JavaScript高手加入其team，包括来自德国的Jörn Zaefferer 、罗马尼亚的Stefan Petre等等。
• 它的体积很小，代码风格独特而又优雅，改变了JavaScript程序员编写程序的方式和思路。同时，它简化了JavaScript的各种操作，使遍历HTML文档、操作DOM、处理事件、执行动画以及Ajax的操作变得非常容易使用。
• jQuery库有一条设计理念，那就是“写的少，做的多”（write less, do more）。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的Ajax使其在众多优秀的JavaScript库中脱颖而出，独树一帜，赢得了众多使用者的拥护和信赖。

jquery操作

$ 是全局对象,代表jQuery对象

jquery入口程序

<script>
    $(document).ready(function(){
      jquery代码....
    })
	// 简化写法
    $(function(){
      jquery代码....
    })
</script>

jquery对象

jQuery对象和Dom对象不能互相调用对方的方法(函数)，若需要jQuery对象去掉DOM对象的方法时，可以将jQuery对象转换成DOM对象

jQuery-------Dom

• A、$(‘选择器’)[0]方式

$(document).ready(function(){
      $('#msg')[0].click(function(){
        alert('123')
      })
    })

• B、$(‘选择器’).get(0)方式

$(document).ready(function(){
      $('#msg').get(0).click(function(){
        alert('123')
      })
    })

jQuery对象的方法
Dom对象的方法

Dom-----JQuery

• $(DOM对象)

$(document).ready(function(){
      $(document.getElementById('msg')).attr()
    })

jQuery选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

(1)基本选择器：

    A、id选择器：对应的控件必须有id属性，id的属性值唯一
	
	   $('#id属性值')
	   
	B、类型选择器：对应的控件必须有class属性，class属性值可以重复
	
	   $('.class属性值')
	   
	C、标签名选择器：通过标签名称进行选择
	
	   $('标签名')
	   
	D、选择所有控件：*(通配符)
	
	   $(*)

(2)基本过滤选择器：

     A、:first：选择第一个元素
	 
	 B、:last：选择最后一个元素
	 
	 C、:not(选择器)：去掉选择器对应的元素
	 
	 D、:even：选择索引值为偶数的元素
	 
	 E、:old：选择索引值为奇数的元素
	 
	 F、:eq(index)：选择索引值等于index的元素
	 
	 G、:gt(index)：选择索引值大于index的元素
	 
	 H、:lt(index)：选择索引值小于index的元素

(3)属性过滤选择器：

     A、[attribute]：选择拥有此属性的元素
	 
	     $('div[title]')
		 
     B、[attribute=value]：选择指定属性值得元素
	 
	     $("div[title='deyun']")
		 
	 C、[attribute^=value]：选取指定属性值以value开始的元素(value是可变的)
	 
	 D、[attribute$=value]：选取指定属性值以value结尾的元素(value是可变的)

(4)子元素过滤选择器

      :nth-child(index/even/odd/计算表达式)

jQuery属性

(1)获取控件的某个属性值

       attr(属性名);   

(2)设置属性值：

	   attr("属性名","值"/fn)

(3)删除属性：

	   removeAttr(name)

<script>
    $(function(){
      $('input').attr('value','456')
      $('input').removeAttr('type')
    })
  </script>
  <input type="text" value="123">

jQuery样式操作

(1)获取css样式：

	   css("样式规则名")

(2)设置css样式

	   css("样式规则","值")
	   
	   css({规则1:"值",规则2:"值"})

(3)添加css样式：

	    addClass('类选择器名')

(4)移除css样式:

	    removeClass('类选择器名')

(5)判断控件是否具有指定的class属性值

	    hasClass('类选择器')

(6)添加和删除的交替

	   toggleClass('类选择器名')：若控件有给定的class属性就删除，若没有就添加

<style>
    .msg1{
      background-color: green;
    }
    .msg2{
      background-color: gold;
    }
  </style>
  <script>
    $(function(){
      $('#msg').css('color','red')
      $('#msg').css({fontSize:'30px',fontWeight:700})
      $('#msg').removeClass('msg1')
      $('#msg').addClass('msg2')
      console.log($('#msg').hasClass('msg1'));
      $('msg').toggleClass('msg2')
    })
  </script>
  <div id="msg" class="msg1">我是msg</div>

操作标签控件的html内容

(1)获取元素的html内容:

	     html()

(2)设置元素的html内容

	     html(内容)

<script>
    $(function(){
      console.log($('#msg').html())
      $('#msg').html('我不是msg')
    })
  </script>
  <div id="msg">我是msg</div>

操作表单控件的值(文本、选择框)

(1)获取控件的value属性值：

	     val()

(2)设置控件的value属性值：

	     val(值)

<script>
    $(function(){
      console.log($('input').val())
      $('input').val('我不是msg')
    })
  </script>
  <input type="text" value="我是val">

value值先获取再修改