Jquery基础1-----入门

Posted 2020-09-27

1.让jQuery放弃对$符号的使用

　　出了jquery之外，仍有一些javascript库也使用了$符号，可以使用jQuery.noConflict();方法让jQuery放弃对$符号的使用

　　也可自定义jQuery的简写符号：

　　var jq = jQuery.noConflict();

　　jq(document).ready(function(){});//jq代替$，成为jquery的简写形式

2.等待DOM就绪

　　$(document).ready(function(){

　　　　console.log("在function内部编写代码");

　　});

　　这种方法的实质是：以函数作为参数传递给ready方法，其实是为jQuery的ready事件绑定事件处理函数，可简写为$(function(){});

3.延迟ready事件的出发事件------holdReady()

　　当我们动态载入外部资源时这个方法有用

　　$.holdReady(true);//延迟ready事件的触发

　　$(document).ready(function(){

　　　　console.log("在function内部编写代码");

　　});

　　setTimeout(function(){

　　　　$.holdReady(false);//五秒后接触ready时间的延迟

　　},5000);

4. 使用上下文限制搜索范围

　　1) 将一个选择器用作下一个选择器的上下文

　　$(document).ready(function(){

　　　　$("img:odd",$("div")).mouseout(function(){});//选取所有div中的第奇数个img，$("div")用作另一个选择器的上下文。

　　});

　　2)将htmlElement对象用作上下文

　　$(document).ready(function(){

　　　　var ele = document.getElementById(""block);

　　　　$("img:odd",block).mouseout(function(){});//在block元素内搜索奇数图片

　　});

5.确定创建jQuery对象对应的上下文对象-----context属性

　　$(document).ready(function() {

　　　　var jq1 = $("img:odd");

　　　　//没有上下文对象，默认为document，由于document没有tagName属性，所以返回undifined
　　　　console.log("No context: " + jq1.context.tagName);//undifined

　　　　//上下文元素为多个元素时，其上下文对象为document
　　　　var jq2 = $("img:odd", $("div"));
　　　　console.log("Multiple context elements: " + jq2.context.tagName);//undifined
　　　　//使用单一HTMLElement元素创建jQuery对象，其上下文对象为该HTMLElement元素
　　　　var jq3 = $("img:odd", document.getElementById("block"));
　　　　console.log("Single context element: " + jq3.context.tagName); //block对应的标签名
　　　});

 

 

6.jQuery对象和DOM对象的转换与处理

　　由DOM对象生成Jquery对象

　　var $id1 = $(document.getElementById("id1"));//此时$id1 为jQuery对象

　　jQuery对象生成DOM对象：可以通过数组、each、索引等方法获得具体如下

　　1)把jQuery对象看成是一个HTMLElement对象数组---享受jQuery高级功能的同时仍可以直接访问DOM

　　$(document).ready(function() {
　　　　var elems = $("img:odd");
　　　　for (var i = 0; i < elems.length; i++) {
　　　　　　console.log(elems[i].tagName + " " + elems[i].src);//直接访问Img对象的src属性
　　　　}
　　});

　　2)迭代JQuery对象内含的DOM对象

　　$(document).ready(function() {
　　　　$("img:odd").each(function(index, elem) {//index为索引，elem为每一个DOM对象
　　　　　　console.log("Element: " + elem.tagName + " " + elem.src);
　　　　});
　　});

　　3)获取指定索引位置的HTMLElement对象（DOM对象）

　　$(document).ready(function() {
　　　　var elem = $("img:odd").get(1);//获取索引位置为1的DOM元素
　　　　console.log( elem.tagName + " " + elem.src);
　　});

　　4）确定一个HTMLElement对象的序号----index方法

　　$(document).ready(function() {

　　　　var elems = $("body *");
　　　　// index方法传入DOM参数
　　　　var index = elems.index(document.getElementById("oblock"));
　　　　console.log("Index using DOM element is: " + index);

　　　　// index对象传入jQuery对象
　　　　index = elems.index($("#oblock"));
　　　　console.log("Index using jQuery object is: " + index);
　　});

　　注意：index方法也可传入字符串参数（解释成选择器，可能会造成两个结果集翻转）和空参数（得到一个元素相当于邻居的序号）

　　5.jquery支持链式调用